Sidebar
A responsive navigation sidebar that includes support for branding, navigation, forms and more.
Here’s an example on how to use the <ISidebar> inside a dashboard layout. The sidebar automatically collapses responsively.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<ICollapsible color="transparent">
<ICollapsibleItem title="Menu">
<INavItem to="/about"> Item 1 </INavItem>
<INavItem to="/about"> Item 2 </INavItem>
<INavItem to="/about"> Item 3 </INavItem>
</ICollapsibleItem>
</ICollapsible>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Color Variants
Inkline includes two predefined sidebar styles. You can set the style of a <ISidebar> using the variant property, which can have a value of light or dark. By default, modals use the light variant.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar color="light" fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu
v-model="open"
color="light"
animation="arrow-left"
class="_lg:hidden"
/>
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" color="light">
<INav vertical color="light">
<INavItem to="/"> Home </INavItem>
<ICollapsible color="transparent">
<ICollapsibleItem title="Menu">
<INavItem to="/about"> Item 1 </INavItem>
<INavItem to="/about"> Item 2 </INavItem>
<INavItem to="/about"> Item 3 </INavItem>
</ICollapsibleItem>
</ICollapsible>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Light Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
<ILayout>
<ILayoutHeader>
<INavbar color="dark" fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu
v-model="open"
color="dark"
animation="arrow-left"
class="_lg:hidden"
/>
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" color="dark">
<INav vertical color="dark">
<INavItem to="/"> Home </INavItem>
<ICollapsible color="transparent">
<ICollapsibleItem title="Menu">
<INavItem to="/about"> Item 1 </INavItem>
<INavItem to="/about"> Item 2 </INavItem>
<INavItem to="/about"> Item 3 </INavItem>
</ICollapsibleItem>
</ICollapsible>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Dark Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Size Variants
You're able to use the size modifier to control the size of your sidebar, using one of the available sizes: sm, md, and lg.
The default size is set to md.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" size="sm">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Small Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" size="md">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Medium Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" size="lg">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Large Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Placement
You can easily place your sidebar on the left or right side of a layout by setting the placement property . By default, sidebars are on the left side.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" placement="left">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Left Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Left Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
<ISidebar v-model="open" placement="right">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
</ILayout>
</ILayout>
</template>Collapsible Menu
You can use an <ICollapsible> component with one or more <ICollapsibleItem> components inside the <INav> component to create a contextual sidebar menu. Learn more about the Collapsible component.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<ICollapsible color="transparent">
<ICollapsibleItem title="Menu">
<INavItem to="/about"> Item 1 </INavItem>
<INavItem to="/about"> Item 2 </INavItem>
<INavItem to="/about"> Item 3 </INavItem>
</ICollapsibleItem>
</ICollapsible>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Sidebar Collapsing
You can control at which breakpoint your sidebar will collapse at using the collapse property. By default, the sidebar will collapse on the md screen size, but you can use any breakpoint value.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_xl:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" collapse="lg">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar</h1>
<p>
Example content for a page with a sidebar that collapses on large
screens, a layout typically seen in Documentation pages and Web
Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Always Collapsible
Besides the breakpoint values, you can use a boolean value to set your sidebar to be always collapsible, or never collapsible.
Setting a collapse value of true will set the sidebar to be always collapsible.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open" :collapse="true">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar</h1>
<p>
Example content for a page with a sidebar that collapses on large
screens, a layout typically seen in Documentation pages and Web
Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Never Collapsible
Setting a collapse value of false will set the sidebar to never be collapsible.
Preview
Component.vue
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar :collapse="false">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar</h1>
<p>
Example content for a page with a sidebar that collapses on large
screens, a layout typically seen in Documentation pages and Web
Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Collapse Position
Using the collapse-position property you can set the collapsed sidebar position to
relativeabsolutefixed
This property allows you to control whether the sidebar will affect the content that it is next to it when reaching the collapse breakpoint.
Preview
Component.vue
<script>
export default {
data() {
return {
openRelative: false,
openAbsolute: false,
openFixed: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="openRelative" animation="arrow-left" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="openRelative" :collapse="true" collapse-position="relative">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar Collapse Relative</h1>
<p>
Example content for a page with a sidebar that collapses on large
screens, a layout typically seen in Documentation pages and Web
Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="openAbsolute" animation="arrow-left" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="openAbsolute" :collapse="true" collapse-position="absolute">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar Collapse Absolute</h1>
<p>
Example content for a page with a sidebar that collapses on large
screens, a layout typically seen in Documentation pages and Web
Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="openFixed" animation="arrow-left" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="openFixed" :collapse="true" collapse-position="fixed">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> Contact </INavItem>
<INavItem to="/contact"> Contact </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar Collapse Fixed</h1>
<p>
Example content for a page with a sidebar that collapses on large
screens, a layout typically seen in Documentation pages and Web
Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>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 <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.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand to="/"> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open">
<INav vertical>
<INavItem to="/"> Home </INavItem>
<INavItem to="/about"> About </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>Active State
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.
Preview
Component.vue
<script>
export default {
data() {
return {
open: false
};
}
};
</script>
<template>
<ILayout>
<ILayoutHeader>
<INavbar fluid :collapse="false">
<INavbarBrand> Dashboard </INavbarBrand>
<IHamburgerMenu v-model="open" animation="arrow-left" class="_lg:hidden" />
</INavbar>
</ILayoutHeader>
<ILayout vertical class="_padding-top:1/2">
<ISidebar v-model="open">
<INav vertical>
<INavItem
:to="{ path: '/docs/components/sidebar' }"
exact-active-class="-active"
>
Active Router Link
</INavItem>
<INavItem active> Active Item </INavItem>
</INav>
</ISidebar>
<ILayoutContent>
<IContainer fluid>
<IRow>
<IColumn>
<h1>Sidebar</h1>
<p>
Example content for a page with a sidebar, a layout typically seen
in Documentation pages and Web Application dashboards.
</p>
</IColumn>
</IRow>
</IContainer>
</ILayoutContent>
</ILayout>
</ILayout>
</template>