Menu
Documentation

Collapse layout

Preview

Overview

The collapse layout is a sidebar layout that can be collapsed or expanded. It is useful for applications that need to display a lot of information in a small space.

Features

  • Collapsible sidebar
  • Single or nested links
  • Scrollable middle area
  • Responsive support

Anatomy

vue
<template>
  <TairoCollapseLayout>
    <TairoCollapseSidebar>
      <TairoCollapseSidebarHeader />
      <TairoCollapseSidebarClose />
      <TairoCollapseSidebarLinks>
        <TairoCollapseSidebarLink />

        <TairoCollapseCollapsible>
          <template #trigger>
            <TairoCollapseCollapsibleTrigger />
          </template>

          <TairoCollapseCollapsibleLink />
        </TairoCollapseCollapsible>
      </TairoCollapseSidebarLinks>
    </TairoCollapseSidebar>

    <TairoCollapseContent>
      <slot />
    </TairoCollapseContent>
  </TairoCollapseLayout>
</template>
css
@theme {
  --tairo-collapse-width-open: 17rem;
  --tairo-collapse-width-collapsed: 5rem;
}

Components

TairoCollapseLayout

Slot Type
#default
{ isCollapsed: any; isMobileOpen: any; toggleMobileNav: any; }

TairoCollapseSidebar

Slot Type
#default
{}

TairoCollapseSidebarHeader

Slot Type
#default
{}

TairoCollapseSidebarClose

Slot Type
#default
{}

TairoCollapseSidebarLinks

Slot Type
#default
{}

TairoCollapseSidebarLink

Prop Type
icon
default:-
string
label
default:-
string
to
default:-
any
Slot Type
#default
{}

TairoCollapseCollapsible

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.

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.

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
{}

TairoCollapseCollapsibleTrigger

CollapsibleTrigger
Prop Type
icon
default:-
string
label
default:-
string
Slot Type
#default
{}

TairoCollapseCollapsibleLink

Prop Type
label
default:-
string
to
default:-
any
Slot Type
#default
{}

TairoCollapseContent

Slot Type
#default
{}