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, description color depends on navbar background color. But you can pass own color if you want.
Height #
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| bordered |
|
| |
| bottom | Sets the component position to the bottom ( |
|
|
| color | Color of the component (theme string or |
|
|
| fixed | Switches component position to |
|
|
| hideOnScroll | Hides component when scrolling. |
|
|
| preset | Named preset combination of component props. |
| - |
| shadowed |
|
| |
| shape | If true, shape will be drawn at navbar background. |
|
|
| textColor | Text color (theme string or HEX string). |
| - |
Slots #
| Name | Description |
|---|---|
center | |
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)) |