Navbar
Here’s an example of the basic components included in a <INavbar> that automatically collapses responsively.
<template>
<INavbar>
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
<IInput placeholder="Type something..">
<template #append>
<IButton color="primary">
<IIcon name="ink-search" />
</IButton>
</template>
</IInput>
</INavbarCollapsible>
</INavbar>
</template>
Inkline includes two predefined navbar styles. You can set the style of a <INavbar> using the variant property, which can have a value of light or dark. By default, modals use the light variant.
<template>
<INavbar color="light">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
<INavbar color="dark">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
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.
<template>
<INavbar size="sm">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
<INavbar size="md">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
<INavbar size="lg">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
You can use an <IDropdown> component inside the <INav> component to create a contextual navbar menu. Learn more about the Dropdown component.
<template>
<INavbar>
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<IDropdown>
<INavItem stop-propagation>Dropdown</INavItem>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
You can position the <INav> component to the start, end, or center of the <INavbarCollapsible> component using flexbox utilities. Learn more about the Nav component.
<template>
<INavbar>
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible class="_justify-content:flex-start">
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
<INavbar>
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible class="_justify-content:center">
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
<INavbar>
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible class="_justify-content:flex-end">
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
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.
<template>
<INavbar collapse="lg">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
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.
<template>
<INavbar :collapse="true">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
Setting a collapse value of false will set the navbar to never be collapsible.
<template>
<INavbar :collapse="false">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
Sometimes, it's necessary to control whether the collapsed Navbar is open or not programmatically. Fort that, you can use the v-model directive.
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<IButton @click="open = !open">Toggle Navbar</IButton>
<INavbar v-model="open" :collapse="true" :collapse-on-click-outside="false">
<INavbarBrand to="/"> Navbar </INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
Nav items will be automatically converted to link anchors <a> when providing a href property. You can also specify target and rel properties.
The <INavItem> component is well integrated with the Vue Router plugin and will be converted to a <RouterLink> when using the to property. Learn more about the Nav Item component.
<template>
<INavbar>
<INavbarBrand to="/">Navbar</INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
You can control the active state of your <INavItem> 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.
<template>
<INavbar>
<INavbarBrand :to="{ path: '/docs/components/navbar' }">Navbar</INavbarBrand>
<INavbarCollapsible>
<INav>
<INavItem :to="{ path: '/docs/components/navbar' }" exact-active-class="-active">
Active Router Link
</INavItem>
<INavItem active> Active Item </INavItem>
</INav>
</INavbarCollapsible>
</INavbar>
</template>
INavbar
INavbarBrand
INavbar
INavbarBrand
INavbarCollapsible
INavbar
INavbarCollapsible
INavbar
INavbarBrand
INavbarCollapsible