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

Collapse Breakpoint

You can control what breakpoint your navbar will collapse at using the collapse property. By default, the navbar will collapse on the md screen size.

Collapse Breakpoint Example
Always or Never Collapsible

Besides the breakpoint values, you can use a boolean value to set your navbar to be always collapsible, or never collapsible.

Setting a collapse value of true will set the navbar to be always collapsible.

Always Collapsible Example

Setting a collapse value of false will set the navbar to never be collapsible.

Never Collapsible Example
Manual Collapse

Sometimes, it's necessary to control whether the Navbar is collapsed or not programmatically. You can use the v-model directive to control whether the Navbar should be collapsed or not.

Manual Navbar Collapse Example

Component API

Here you can find a list of the various customization options you can use for the navbar components as props, as well as available slots and events.

Navbar API
Navbar Brand API
Navbar Items API

Sass Variables

Here you can find a list of the Sass variables you can use for the navbar components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.