Navbar #
Examples #
Default #
You can use left, center and right slots to pass items to navbar.
Colors #
By default navbar uses secondary color. You can pass color props to change navbar background color. Also, text color depends on navbar background color. But you can pass own color if you want.
Height #
Shape #
You can add the shape to navbar background. Shape color will be taken automatic from color prop.
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 |
|
|
| hide-on-scroll | Hides component when scrolling. |
|
|
| preset | Named preset combination of component props. |
| - |
| shape | If true, shape will be drawn at navbar background. |
|
|
| text-color | Text color (theme string or HEX string). |
| - |
Slots #
| Name | Description |
|---|---|
default | Place VaNavbar items on the center (default) |
left | Place VaNavbar items on the left |
right | Place VaNavbar items on the right |
Css Variables #
| Name | Default Value |
|---|---|
| --va-navbar-mobile-height | 6.5rem |
| --va-navbar-height | 4.0625rem |
| --va-navbar-padding-x | 1rem |
| --va-navbar-padding-y | 1.2rem |
| --va-navbar-transition | transform 0.5s ease |
| --va-navbar-position | relative |
| --va-nav-z-index | calc(var(--va-z-index-teleport-overlay) - 100) |
| --va-navbar-sm-padding | 1.1875rem 1rem 1rem |
| --va-navbar-shape-width | 33% |
| --va-navbar-shape-max-width | 467px |
| --va-navbar-shape-bg | rgba(0, 0, 0, 0.5) |
| --va-navbar-shape-border-left | 3.1875rem solid transparent |
| --va-navbar-shape-border-right | 3.1875rem solid transparent |
| --va-navbar-shape-transition | border-top-color 0.3s ease |
| --va-navbar-item-margin | 0.75rem |
| --va-navbar-item-margin-side | calc(2 * var(--va-navbar-item-margin)) |