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

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{ isMobileOpen: any; }

TairoTopnavNavbar

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoTopnavHeader

Prop Type
class
default:-
unknown
hide
default:-
"scroll" | "scroll-down"
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoTopnavContent

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}