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

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

TairoSidenavCollapsible

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

TairoSidenavCollapsibleLink

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

TairoSidenavCollapsibleTrigger

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

TairoSidenavSidebar

Slot Type
#default
{}

TairoSidenavSidebarHeader

Slot Type
#default
{}

TairoSidenavSidebarDivider

You can use <TairoSidenavSidebarDivider> without any props.

TairoSidenavSidebarLinks

Slot Type
#default
{}

TairoSidenavSidebarLink

Prop Type
count
default:-
string | number
icon
default:-
string
label
default:-
string
to
default:-
string
Slot Type
#default
{}

TairoSidenavContent

Slot Type
#default
{}