Sidebar layout
Overview
The sidebar layout is a double sided navigation layout. It has a sidebar with a list of items that can either be links or buttons, and customizable subsidebars that can be toggled based on the active item.
Features
- Solid app navigation
- Customizable subsidebars
- Single or nested links
- Responsive support
Anatomy
vue
<template>
<TairoSidebarLayout>
<TairoSidebarNav>
<TairoSidebar>
<TairoSidebarLinks>
<TairoSidebarTrigger />
</TairoSidebarLinks>
</TairoSidebar>
<TairoSidebarSubsidebar>
<TairoSidebarSubsidebarHeader />
<TairoSidebarSubsidebarContent>
<TairoSidebarSubsidebarLink />
<TairoSidebarSubsidebarCollapsible>
<template #trigger>
<TairoSidebarSubsidebarCollapsibleTrigger />
</template>
<TairoSidebarSubsidebarCollapsibleLink />
</TairoSidebarSubsidebarCollapsible>
</TairoSidebarSubsidebarContent>
</TairoSidebarSubsidebar>
</TairoSidebarNav>
<TairoSidebarContent>
<slot />
</TairoSidebarContent>
</TairoSidebarLayout>
</template>
css
@theme {
--tairo-sidebar-icon-width: 3.5rem;
--tairo-sidebar-subsidebar-width: 15rem;
}