Navbar
Example
Here’s an example of the basic components included in a <i-navbar> that automatically collapses responsively.
<i-navbar>
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
</i-nav>
<i-nav>
<i-input class="item" placeholder="Type something..">
<i-button variant="primary" slot="append">
<font-awesome-icon icon="search" />
</i-button>
</i-input>
</i-nav>
</i-navbar-items>
</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="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
<i-navbar size="md">
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
<i-navbar size="lg">
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</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 variant="light">
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
<i-navbar variant="dark">
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
Dropdown
You can use an <i-dropdown> component inside the <i-navbar-items> or <i-nav> component to create a contextual navbar menu.
<i-navbar>
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
<i-nav>
<i-dropdown placement="bottom-end">
<i-button variant="primary">Dropdown</i-button>
<i-dropdown-menu>
<i-dropdown-item href="">Action</i-dropdown-item>
<i-dropdown-item href="">Another action</i-dropdown-item>
<i-dropdown-item href="" disabled>Something disabled here</i-dropdown-item>
<i-dropdown-divider />
<i-dropdown-item>Separated item</i-dropdown-item>
</i-dropdown-menu>
</i-dropdown>
</i-nav>
</i-navbar-items>
</i-navbar>
Nav Placement
You can position the <i-nav> component to the start, end, or center of the <i-navbar-items> component using flexbox utilities.
<i-navbar>
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items class="_justify-content-start">
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
<i-navbar>
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items class="_justify-content-center">
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
<i-navbar>
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items class="_justify-content-end">
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
<i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
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.
<i-navbar collapse="lg">
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'index' }">About</i-nav-item>
</i-nav>
</i-navbar-items>
</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="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'index' }">About</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
Setting a collapse value of false will set the navbar to never be collapsible.
<i-navbar :collapse="false">
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'index' }">About</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
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.
<i-button @click="collapsed = !collapsed">Toggle Collapsed</i-button>
<i-navbar :collapse="true" v-model="collapsed" :collapse-on-click-outside="false">
<i-navbar-brand :to="{ name: 'index' }">Navbar</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
<i-nav-item :to="{ name: 'about' }">About</i-nav-item>
</i-nav>
</i-navbar-items>
</i-navbar>
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.
Property collapse
Type String, Boolean
Accepted xs, sm, md, lg, xl, true, false
Default md
Description Specifies the breakpoint at which to collapse the navbar.
Property collapse-on-click
Type Boolean
Accepted true, false
Default true
Description Toggles collapsing the navbar when clicking a navbar item if collapsed.
Property collapse-on-click-outside
Type Boolean
Accepted true, false
Default true
Description Toggles collapsing the navbar when clicking outside the navbar if collapsed.
Property fluid
Type Boolean
Accepted true, false
Default false
Description Sets the IContainer wrapping the navbars's content as fluid.
Property size
Type String
Accepted sm, md, lg
Default md
Description Sets the size of the navbar component.
Property value
Type Boolean
Accepted true, false
Default false
Description Provides a way to collapse the navbar programmatically. Should be used as part of v-model directive.
Property variant
Type String
Accepted light, dark
Default light
Description Sets the color variant of the navbar component.
Description Slot for navbar component default content.
Description Slot for navbar brand component default content.
Description Slot for navbar items component default content.
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.
Property $navbar-padding-base
Default $spacer-1-2 0
Property $navbar-padding
Default size-map($navbar-padding-base, $sizes, $size-multipliers)
Property $navbar-brand-margin
Default $spacer
Property $navbar-brand-font-size
Default $font-size-md
Property $navbar-brand-padding-base
Default $spacer-1-2 0
Property $navbar-brand-padding
Default size-map($navbar-brand-padding-base, $sizes, $size-multipliers)
Property $navbar-color-for-light-variant
Default $color-for-light-variant
Property $navbar-color-for-dark-variant
Default $color-for-dark-variant
Property $navbar-variant-{variant}
Default navbar-variant($color-{variant})
Property $navbar-variants
Default (
light: $navbar-variant-light,
dark: $navbar-variant-dark
)
Default @function navbar-variant($variant) {
$navbar-variant-color: variant-color-by-luminance($variant, $navbar-color-for-light-variant, $navbar-color-for-dark-variant);
$navbar-variant-item-color: variant-color-by-luminance($variant, darken-lightness($navbar-color-for-light-variant, 20%), lighten-lightness($navbar-color-for-dark-variant, 20%));
$navbar-variant-item-color-active: $navbar-variant-color;
$navbar-variant-background: $variant;
$navbar-variant-background-hover: darken-lightness($navbar-variant-background, 10%);
$navbar-variant-collapsed-item-background: darken-lightness($navbar-variant-background, 5%);
$navbar-variant-collapsed-item-background-hover: $navbar-variant-background-hover;
$variant-map: (
color: $navbar-variant-color,
item-color: $navbar-variant-item-color,
item-color-active: $navbar-variant-item-color-active,
background: $navbar-variant-background,
background-hover: $navbar-variant-background-hover,
collapsed-item-background: $navbar-variant-collapsed-item-background,
collapsed-item-background-hover: $navbar-variant-collapsed-item-background-hover
);
@return $variant-map;
}
Inkline