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 |
|
| |
| color |
|
| |
| fixed |
|
| |
| hideOnScroll |
|
| |
| preset |
| - | |
| shape |
|
| |
| textColor |
| - |
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)) |