Navbar
#

Examples
#

Default
#

You can use left, center and right slots to pass items to navbar.

Open in GitHub

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.

Dashboard
Reports
Users
Dashboard
Reports
Users
Dashboard
Reports
Users
Open in GitHub

Height
#

Dashboard
Reports
Users
Open in GitHub

Shape
#

You can add the shape to navbar background. Shape color will be taken automatic from color prop.

Dashboard
Reports
Users
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
bottom

Boolean

false

color

String

"background-secondary"

fixed

Boolean

false

hideOnScroll

Boolean

false

preset

String

-

shape

Boolean

false

textColor

String

-

Slots #

NameDescription

default

Place VaNavbar items on the center (default)

left

Place VaNavbar items on the left

right

Place VaNavbar items on the right

Css Variables #

NameDefault 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))