Navbar

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

Example

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

Navbar Example

Sizes

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

Variants

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

API

Navbar API <i-navbar>
Property Description Type Accepted Default
collapse Specifies the breakpoint at which to collapse the navbar. String, Boolean xs, sm, md, lg, xl, true, false md
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
value Provides a way to collapse the navbar programmatically. Should be used as part of v-model directive. Boolean true, false false
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.