App bar #
The app bar component is a part of a websiteโs navigation and itโs an alternative to the header element in apps.
Examples #
Basic usage #
By default, a va-app-bar needs a parent element with relative position.
Color #
You can set a background color and gradient of the component with color and gradient props.
Fixed #
You can make app bar position fixed via fixed prop.
Hide #
hide-on-scroll allows you to hide app bar when you scroll away. You need to define target.
Shadow #
You can set a shadow with shadow-on-scroll prop. You need to define target.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| bottom | Sets the component position to the bottom ( |
|
|
| color | Color of the component (theme string or |
| - |
| fixed | Switches component position to |
|
|
| gradient | Applies gradient style to background. |
|
|
| hide-on-scroll | Hides component when scrolling. |
|
|
| preset | Named preset combination of component props. |
| - |
| shadow-color | Sets color to the box-shadow. |
|
|
| shadow-on-scroll | Applies box-shadow to the component when scrolling target. |
|
|
| target | Target for scrolling. |
|
|
Slots #
| Name | Description |
|---|---|
default | Slot for app-bar content |
Css Variables #
| Name | Default Value |
|---|---|
| --va-app-bar-position | relative |
| --va-app-bar-height | auto |
| --va-app-bar-shadow | 0 0 12px 2px |
| --va-app-bar-z-index | calc(var(--va-z-index-teleport-overlay) - 100) |
| --va-app-bar-transition | transform 0.5s ease |