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;
}
Components
TairoSidenavLayout
Unable to load component <TairoSidenavLayout> metadata.
TairoSidenavCollapsible
CollapsibleRoot Unable to load component <TairoSidenavCollapsible> metadata.
TairoSidenavCollapsibleLink
Unable to load component <TairoSidenavCollapsibleLink> metadata.
TairoSidenavCollapsibleTrigger
CollapsibleTrigger Unable to load component <TairoSidenavCollapsibleTrigger> metadata.
TairoSidenavSidebar
Unable to load component <TairoSidenavSidebar> metadata.
TairoSidenavSidebarHeader
Unable to load component <TairoSidenavSidebarHeader> metadata.
TairoSidenavSidebarDivider
Unable to load component <TairoSidenavSidebarDivider> metadata.
TairoSidenavSidebarLinks
Unable to load component <TairoSidenavSidebarLinks> metadata.
TairoSidenavSidebarLink
Unable to load component <TairoSidenavSidebarLink> metadata.
TairoSidenavContent
Unable to load component <TairoSidenavContent> metadata.