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

Unable to load component <TairoCollapseLayout> metadata.

TairoCollapseSidebar

Unable to load component <TairoCollapseSidebar> metadata.

TairoCollapseSidebarHeader

Unable to load component <TairoCollapseSidebarHeader> metadata.

TairoCollapseSidebarClose

Unable to load component <TairoCollapseSidebarClose> metadata.
Unable to load component <TairoCollapseSidebarLinks> metadata.
Unable to load component <TairoCollapseSidebarLink> metadata.

TairoCollapseCollapsible

CollapsibleRoot
Unable to load component <TairoCollapseCollapsible> metadata.

TairoCollapseCollapsibleTrigger

CollapsibleTrigger
Unable to load component <TairoCollapseCollapsibleTrigger> metadata.
Unable to load component <TairoCollapseCollapsibleLink> metadata.

TairoCollapseContent

Unable to load component <TairoCollapseContent> metadata.