Search docs...

Ctrl K

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

Slot	Type
`#default`	`{}`

TairoSidebarBackdrop

You can use <TairoSidebarBackdrop> without any props.

TairoSidebarLayout

Model	Type
`v-model`	`string`

Prop	Type
`default-value` default:`-`	`string`

Slot	Type
`#default`	`{ isMobileOpen: any; toggleMobileNav: any; modelValue: any; }`

TairoSidebarContent

Slot	Type
`#default`	`{}`

TairoSidebarNav

Slot	Type
`#default`	`{}`

TairoSidebarLinks

Slot	Type
`#default`	`{}`

TairoSidebarLink

Prop	Type
`active` default:`-`	`boolean`
`icon` default:`-`	`string`
`to` default:`-`	`any`

Slot	Type
`#default`	`{}`

TairoSidebarTrigger

Prop	Type
`value` default:`-`	`string`
`icon` default:`-`	`string`

Slot	Type
`#default`	`{}`

TairoSidebarSubsidebar

Prop	Type
`value` default:`-`	`string`

Slot	Type
`#default`	`{}`

TairoSidebarSubsidebarHeader

BaseHeading

Slot	Type
`#default`	`{}`

TairoSidebarSubsidebarLink

Prop	Type
`icon` default:`-`	`string`
`label` default:`-`	`string`
`to` default:`-`	`any`

Slot	Type
`#default`	`{}`

TairoSidebarSubsidebarCollapsible

CollapsibleRoot

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`children` default:`-`	`{ to: string; label: string; }[]`
`default-open` default:`-`	`boolean` The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
`disabled` default:`-`	`boolean` When `true`, prevents the user from interacting with the collapsible.
`icon` default:`-`	`string`
`label` default:`-`	`string`
`open` default:`-`	`boolean` The controlled open state of the collapsible. Can be binded with `v-model`.
`unmount-on-hide` default:`-`	`boolean` When `true`, the element will be unmounted on closed state.

Event	Emitted Value Type
`update:open`	`[value: boolean]`

Slot	Type
`#trigger`	`{}`
`#default`	`{}`

TairoSidebarSubsidebarCollapsibleLink

Prop	Type
`label` default:`-`	`string`
`to` default:`-`	`any`

Slot	Type
`#default`	`{}`

TairoSidebarSubsidebarCollapsibleTrigger

CollapsibleTrigger

Prop	Type
`icon` default:`-`	`string`
`label` default:`-`	`string`

Slot	Type
`#default`	`{}`

TairoSidebarSubsidebarContent

Slot	Type
`#default`	`{}`

TairoSidebarSubsidebarHeader

Slot	Type
`#default`	`{}`

Collapse

Sidenav