A responsive navigation header that includes support for branding, navigation, forms and more.


Here’s an example of the basic components included in a <i-navbar> that automatically collapses responsively.

Navbar Example


You're able to use the size modifier to control the size of your navbar, using one of the available sizes: sm, md, and lg. The default size is set to md.

Navbar Sizes


Inkline includes two predefined navbar styles. You can set the style of a <i-navbar> using the variant property, which can have a value of light or dark. By default, modals use the light variant.

Navbar Variants

You can use an <i-dropdown> component inside the <i-navbar-items> or <i-nav> component to create a contextual navbar menu.

Navbar Dropdown

You can position the <i-nav> component to the start, end, or center of the <i-navbar-items> component using flexbox utilities.

Navbar Nav Placement


Navbar API <i-navbar>
Property Description Type Accepted Default
collapseOnClick Collapses the navbar when clicking a navbar item. Boolean true, false true
fluid Sets the IContainer wrapping the navbars's content as fluid. Boolean true, false false
size Sets the size of the navbar component. String sm, md, lg md
variant Sets the color variant of the navbar component. String light, dark light
Navbar Brand API <i-navbar-brand>
Name Description
default Slot for navbar brand component default content.
Navbar Items API <i-navbar-items>
Name Description
default Slot for navbar items component default content.