Navbar

The Navbar component displays brand identity, main navigation, and toolbar actions at the top of the page.

TIP

⚠️ Due to limitations of the whyframe and vitepress demo framework, the interactive demos below may show the mobile responsive layout (hamburger button visible). Click the "Demo" link in the top navigation bar to see the full desktop effect.

Basic Usage

Use variant to control the background style and theme for light/dark mode.

<TNavbar variant="transparent">
  <template #brand>
    <TNavbarBrand href="#">My App</TNavbarBrand>
  </template>
  <TNavMenu :items="menuItems" />
  <template #actions>
    <a class="nav-link px-0" href="#"><IconMoon class="icon icon-1" /></a>
  </template>
</TNavbar>

Dark Theme

Set theme="dark" to enable dark mode.

<TNavbar theme="dark">
  <template #brand>
    <TNavbarBrand href="#">Dashboard</TNavbarBrand>
  </template>
  <TNavMenu :items="menuItems" />
</TNavbar>

Primary Color

Use variant="primary" with dark theme for a colored navbar.

<TNavbar variant="primary" theme="dark">
  ...
</TNavbar>

Data-Driven Menu

Pass a menu configuration array via items prop to auto-render navigation links and dropdowns.

<TNavMenu :items="[
  { label: 'Home', icon: IconStar, href: '#', active: true },
  { label: 'Projects', href: '#', badge: '3' },
  { label: 'More', children: [
    { label: 'Sub item', href: '#' },
  ]},
]" />

API

TNavbar Props

Prop	Description	Type	Default
variant	Background variant	'light' | 'dark' | 'transparent' | 'primary'	'light'
sticky	Stick to top on scroll	boolean	false
theme	Light/dark theme	'light' | 'dark'	—
expand	Collapse breakpoint	'sm' | 'md' | 'lg' | 'xl'	'md'
noPrint	Hide when printing	boolean	true

TNavbar Slots

Slot	Description
brand	Brand/Logo area
actions	Right-side toolbar
default	Main navigation menu area
toggler	Custom mobile toggle button

TNavMenu Props

Prop	Description	Type	Default
items	Menu configuration	NavMenuItem[]	[]
fill	Fill full width	boolean	false

NavMenuItem

Property	Type	Description
label	string	Display text
icon	Icon	Icon component
badge	string | { text, color }	Badge
href	string	Link URL
active	boolean	Active state
disabled	boolean	Disabled state
divider	boolean	Render as divider
children	NavMenuItem[]	Sub menu items

TNavbarBrand Props

Prop	Description	Type	Default
logo	Logo image URL	string	—
href	Link URL	string	'.'
logoWidth	Image width	number	110
logoHeight	Image height	number	32