Navbar

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

Basic Example

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

<i-navbar>
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
        <i-input placeholder="Type something..">
            <template #append>
                <i-button color="primary">
                    <i-icon name="ink-search" />
                </i-button>
            </template>
        </i-input>
    </i-navbar-collapsible>
</i-navbar>

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.

<i-navbar size="sm">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

<i-navbar size="md">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

<i-navbar size="lg">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

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.

<i-navbar color="light">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

<i-navbar color="dark">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

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

Learn more about the Dropdown component.

<i-navbar>
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-dropdown>
                <i-nav-item stop-propagation>Dropdown</i-nav-item>
                <template #body>
                    <i-dropdown-item>Action</i-dropdown-item>
                    <i-dropdown-item>Another action</i-dropdown-item>
                    <i-dropdown-item disabled>Disabled action</i-dropdown-item>
                    <i-dropdown-divider />
                    <i-dropdown-item>Separated item</i-dropdown-item>
                </template>
            </i-dropdown>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

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

Learn more about the Nav component.

<i-navbar>
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible class="_justify-content:flex-start">
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

<i-navbar>
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible class="_justify-content:center">
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

<i-navbar>
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible class="_justify-content:flex-end">
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

You can control at which breakpoint your navbar will collapse at using the collapse property. By default, the navbar will collapse on the md screen size, but you can use any breakpoint value.

<i-navbar collapse="lg">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

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.

<i-navbar :collapse="true">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

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

<i-navbar :collapse="false">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

Manual Collapse

Sometimes, it’s necessary to control whether the collapsed Navbar is open or not programmatically. Fort that, you can use the v-model directive.

<i-button @click="open = !open">Toggle Navbar</i-button>

<i-navbar v-model="open" :collapse="true" :collapse-on-click-outside="false">
    <i-navbar-brand to="/">
        Navbar
    </i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
            <i-nav-item to="/contact">
                Contact
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

Linking and Routing

Nav items will be automatically converted to link anchors <a> when providing a href property. You can also specify target and rel properties.

The <i-nav-item> component is well integrated with the Vue Router plugin and will be converted to a <router-link> when using the to property.

Learn more about the Nav Item component.

<i-navbar>
    <i-navbar-brand to="/">Navbar</i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item to="/">
                Home
            </i-nav-item>
            <i-nav-item to="/about">
                About
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

Active State

You can control the active state of your <i-nav-item> using the active property. When you provide a to property you’re converting the component into a router-link, therefore you can use the active-class and exact-active-class properties and set them to -active.

Learn more about the Nav Item component.

<i-navbar>
    <i-navbar-brand :to="{ name: 'docs-components-navbar' }">Navbar</i-navbar-brand>
    <i-navbar-collapsible>
        <i-nav>
            <i-nav-item :to="{ name: 'docs-components-navbar' }" exact-active-class="-active">
                Active Router Link
            </i-nav-item>
            <i-nav-item active>
                Active Item
            </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    collapseOnItemClick
    TypeBoolean
    Defaulttrue
    Description Determines if the navbar should close when clicking a navbar item
  • Property
    collapseOnClickOutside
    TypeBoolean
    Defaulttrue
    Description Determines if the navbar should close when clicking outside
  • Property
    color
    Type'light' | 'dark'
    Default'light'
    Description The color variant of the navbar
  • Property
    fluid
    TypeBoolean
    Defaultfalse
    Description Display the inner container as fluid, spanning 100% width
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the navbar
  • Property
    menuAnimation
    Type'close' | arrow-up | arrow-down | arrow-left | arrow-right | 'plus' | 'minus'
    Default'close'
    Description The animation of the hamburger menu component used for collapsing

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default navbar content

Events

Use events to react to something happening inside the component.

  • Property
    update:modelValue
    Description Event emitted for setting the modelValue

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----background
    Valuecolor('light')
    Description The background of the navbar component
  • Property
    ----border-top-color
    Valuecolor('light-60')
    Description The border top color of the navbar component
  • Property
    ----border-right-color
    Valuecolor('light-60')
    Description The border right color of the navbar component
  • Property
    ----border-bottom-color
    Valuecolor('light-60')
    Description The border bottom color of the navbar component
  • Property
    ----border-left-color
    Valuecolor('light-60')
    Description The border left color of the navbar component
  • Property
    ----border-color
    Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
    Description The border color of the navbar component
  • Property
    ----border-style
    Valuevar(--border-style)
    Description The border style of the navbar component
  • Property
    ----border-top-width
    Valuevar(--border-top-width)
    Description The border top width of the navbar component
  • Property
    ----border-right-width
    Valuevar(--border-right-width)
    Description The border right width of the navbar component
  • Property
    ----border-bottom-width
    Valuevar(--border-bottom-width)
    Description The border bottom width of the navbar component
  • Property
    ----border-left-width
    Valuevar(--border-left-width)
    Description The border left width of the navbar component
  • Property
    ----border-width
    Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
    Description The border width of the navbar component
  • Property
    ----border-top-left-radius
    Valuevar(--border-top-left-radius)
    Description The border top left radius of the navbar component
  • Property
    ----border-top-right-radius
    Valuevar(--border-top-right-radius)
    Description The border top right radius of the navbar component
  • Property
    ----border-bottom-right-radius
    Valuevar(--border-bottom-right-radius)
    Description The border bottom right radius of the navbar component
  • Property
    ----border-bottom-left-radius
    Valuevar(--border-bottom-left-radius)
    Description The border bottom left radius of the navbar component
  • Property
    ----border-radius
    Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
    Description The border radius of the navbar component
  • Property
    ----box-shadow-offset-x
    Valuevar(--box-shadow-offset-x)
    Description The box shadow horizontal offset of the navbar component
  • Property
    ----box-shadow-offset-y
    Valuevar(--box-shadow-offset-y)
    Description The box shadow vertical offset of the navbar component
  • Property
    ----box-shadow-blur-radius
    Valuevar(--box-shadow-blur-radius)
    Description The box shadow blur radius of the navbar component
  • Property
    ----box-shadow-spread-radius
    Valuevar(--box-shadow-spread-radius)
    Description The box shadow spread radius of the navbar component
  • Property
    ----box-shadow-color
    Valuevar(--box-shadow-color)
    Description The box shadow spread radius of the navbar component
  • Property
    ----box-shadow
    Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
    Description The box shadow of the navbar component
  • Property
    ----font-size
    Valuefont-size()
    Description The font size of the navbar component
  • Property
    ----padding-top
    Valuevar(--padding-top)
    Description The padding top of the navbar component
  • Property
    ----padding-right
    Value0
    Description The padding right of the navbar component
  • Property
    ----padding-bottom
    Valuevar(--padding-bottom)
    Description The padding bottom of the navbar component
  • Property
    ----padding-left
    Value0
    Description The padding left of the navbar component
  • Property
    ----padding
    Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
    Description The padding of the navbar component
  • Property
    ----color
    Valuecontrast-color($color-light)
    Description The color of the navbar component
  • Property
    ----item--background
    Valuecolor('light')
    Description The background of the navbar component item
  • Property
    ----item--background--hover
    Valuecolor('light-55')
    Description The background of the navbar component item when hovered or focused
  • Property
    ----item--color
    Valuevar(----color)
    Description The color of the navbar component item
  • Property
    ----item--color--hover
    Valuevar(----color)
    Description The color of the navbar component item when hovered
  • Property
    ----item--padding-top
    Valuecalc(var(--padding-top) / 2)
    Description The padding top of the navbar component
  • Property
    ----item--padding-right
    Valuevar(--padding-right)
    Description The padding right of the navbar component
  • Property
    ----item--padding-bottom
    Valuecalc(var(--padding-bottom) / 2)
    Description The padding bottom of the navbar component
  • Property
    ----item--padding-left
    Valuevar(--padding-left)
    Description The padding left of the navbar component
  • Property
    ----item--padding
    Valuevar(----item--padding-top) var(----item--padding-right) var(----item--padding-bottom) var(----item--padding-left)
    Description The padding of the navbar component
  • Property
    ----collapsed--background
    Valuecolor('light')
    Description The background of the collapsed navbar component
  • Property
    ----collapsed--item--color
    Valuevar(----color)
    Description The color of the collapsed navbar component item
  • Property
    ----collapsed--item--color--hover
    Valuevar(----color)
    Description The color of the collapsed navbar component item when hovered
  • Property
    ----collapsed--item--background
    Valuevar(----item--background)
    Description The background of the collapsed navbar component item
  • Property
    ----collapsed--item--background--hover
    Valuevar(----item--background--hover)
    Description The background of the collapsed navbar component item when hovered or focused
  • Property
    ----brand--margin-right
    Valuevar(--margin-right)
    Description The margin right of the navbar component brand