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.
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
.
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.
Dropdown
You can use an <i-dropdown>
component inside the <i-nav>
component to create a contextual navbar menu.
Learn more about the Dropdown component.
Nav Placement
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.
Navbar Collapsing
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.
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.
Setting a collapse
value of false
will set the navbar to never be collapsible.
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.
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.
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.
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