Topnav layout

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

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

    <TairoTopnavContent>
      <slot />
    </TairoTopnavContent>
  </TairoTopnavLayout>
</template>

@theme {
  --tairo-topnav-content-width: 100%;
}

Components

TairoTopnavLayout

TairoTopnavNavbar

TairoTopnavHeader

TairoTopnavContent