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

Sets the component position to the bottom (fixed state).

Boolean

false

color

Color of the component (theme string or HEX string).

String

"background-secondary"

fixed

Switches component position to fixed.

Boolean

false

hide-on-scroll

Hides component when scrolling.

Boolean

false

preset

Named preset combination of component props.

String

-

shape

If true, shape will be drawn at navbar background.

Boolean

false

text-color

Text color (theme string or HEX string).

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