Sidenav layout
Overview
The sidenav layout is a single sided navigation layout. It has a sidebar with a list of items that can either be links or buttons, that can be arranged in a collapsible manner.
Features
- Medium sized navigation
- Collapsible links
- Responsive support
Anatomy
vue
<template>
<TairoSidenavLayout>
<TairoSidenavSidebar>
<TairoSidenavSidebarHeader />
<TairoSidenavSidebarDivider />
<TairoSidenavSidebarLinks>
<TairoSidenavSidebarLink />
</TairoSidenavSidebarLinks>
</TairoSidenavSidebar>
<TairoSidenavContent>
<slot />
</TairoSidenavContent>
</TairoSidenavLayout>
</template>
css
@theme {
--tairo-sidenav-sidebar-width: 16.25rem;
}