Navbar

Source API

The Navbar component is a flexible navigation bar that allows users to easily access different sections of a website or application. It typically includes links, branding, and optional elements like icons, search bars, or dropdowns. Each section with the .section class will be evenly distributed in the container. And the last .section item in the navbar will always to the right side.

If you want a primary or dark style navbar, just add the .primary or .dark class to .navbar.

Add the .mini, .small or .large class to a .navbar to make it smaller.

Props
Default Class Name	Combinators
`navbar`	`.navbar`
`container`	`.navbar > .container`
`links`	`.navbar > .links`
`section`	`.navbar > .links > .section`
`buttons` `button`	`.navbar > .links > .section > .buttons` `.navbar > .links > .section > .button`
`brand`	`.brand`
`dropdown`	`.navbar > .links > .section > .buttons > .dropdown` `.navbar > .links > .section > .dropdown`
`divided`	`.navbar > .links > .section.divided`
`burger`	`.burger`
Styles/States	Combinators
`primary`	`.primary.navbar`
`dark`	`.dark.navbar`
`gradient`	`.gradient.navbar`
`gradient-ltr`	`.gradient-ltr.navbar`
`gradient-rtl`	`.gradient-rtl.navbar`
`fixed`	`.fixed.navbar`
`shadowed`	`.shadowed.navbar`

Sizes	Combinators	Height (rem)	Height (px)
Default	-	`5rem`	`80px`
`mini`	`.mini.navbar`	`2.813rem`	`45px`
`small`	`.small.navbar`	`4.063rem`	`65px`
`large`	`.large.navbar`	`5.938rem`	`95px`