Menu
Documentation

Topnav layout

PreviewPreview (slim)

Overview

The topnav layout provides a top navigation bar with a header and content area. It is useful for applications that need to display full width content. You can either use button style navigation links wuth dropdowns or a simple list of tabbed links.

Features

  • Full width navigation
  • Customizable header
  • Includes customizable dropdowns
  • Responsive support

Anatomy

vue
<template>
  <TairoTopnavLayout>
    <TairoTopnavNavbar>
      <TairoTopnavHeader>
        <TairoTopnavContent />
      </TairoTopnavHeader>
    </TairoTopnavNavbar>

    <TairoTopnavContent>
      <slot />
    </TairoTopnavContent>
  </TairoTopnavLayout>
</template>
css
@theme {
  --tairo-topnav-content-width: 100%;
}

Components

TairoTopnavLayout

Slot Type
#default
{ isMobileOpen: any; }

TairoTopnavNavbar

Slot Type
#default
{}

TairoTopnavHeader

Prop Type
hide
default:-
"scroll" | "scroll-down"
Slot Type
#default
{}

TairoTopnavContent

Slot Type
#default
{}