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;
}
Components
TairoSidebar
Unable to load component <TairoSidebar> metadata.
TairoSidebarBackdrop
Unable to load component <TairoSidebarBackdrop> metadata.
TairoSidebarLayout
Unable to load component <TairoSidebarLayout> metadata.
TairoSidebarContent
Unable to load component <TairoSidebarContent> metadata.
TairoSidebarNav
Unable to load component <TairoSidebarNav> metadata.
TairoSidebarLinks
Unable to load component <TairoSidebarLinks> metadata.
TairoSidebarLink
Unable to load component <TairoSidebarLink> metadata.
TairoSidebarTrigger
Unable to load component <TairoSidebarTrigger> metadata.
TairoSidebarSubsidebar
Unable to load component <TairoSidebarSubsidebar> metadata.
TairoSidebarSubsidebarHeader
BaseHeading Unable to load component <TairoSidebarSubsidebarHeader> metadata.
TairoSidebarSubsidebarLink
Unable to load component <TairoSidebarSubsidebarLink> metadata.
TairoSidebarSubsidebarCollapsible
CollapsibleRoot Unable to load component <TairoSidebarSubsidebarCollapsible> metadata.
TairoSidebarSubsidebarCollapsibleLink
Unable to load component <TairoSidebarSubsidebarCollapsibleLink> metadata.
TairoSidebarSubsidebarCollapsibleTrigger
CollapsibleTrigger Unable to load component <TairoSidebarSubsidebarCollapsibleTrigger> metadata.
TairoSidebarSubsidebarContent
Unable to load component <TairoSidebarSubsidebarContent> metadata.
TairoSidebarSubsidebarHeader
Unable to load component <TairoSidebarSubsidebarHeader> metadata.