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

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{ isCollapsed: any; isMobileOpen: any; toggleMobileNav: any; }

TairoCollapseSidebar

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoCollapseSidebarHeader

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoCollapseSidebarClose

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoCollapseSidebarLinks

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoCollapseSidebarLink

Prop Type
class
default:-
unknown
icon
default:-
string
key
default:-
PropertyKey
label
default:-
string
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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.

class
default:-
unknown
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.

key
default:-
PropertyKey
open
default:-
boolean

The controlled open state of the collapsible. Can be binded with `v-model`.

ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
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
class
default:-
unknown
icon
default:-
string
key
default:-
PropertyKey
label
default:-
string
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoCollapseCollapsibleLink

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
label
default:-
string
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
to
default:-
any
Slot Type
#default
{}

TairoCollapseContent

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}