Menu
Documentation

Sidenav layout

Preview

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.
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.
Unable to load component <TairoSidenavSidebarLinks> metadata.
Unable to load component <TairoSidenavSidebarLink> metadata.

TairoSidenavContent

Unable to load component <TairoSidenavContent> metadata.