Navigation Components

Navigation components help users move through your application. Choose between horizontal navigation bars for top-level navigation and vertical navigation lists for sidebar menus.

Navbar

The navbar component provides a responsive horizontal navigation bar, typically used at the top of your application.

Basic Navbar

100%

<byte-navbar>
    <div slot="brand">
      <a href="/" class="flex items-center no-underline">
        <byte-icon name="code-bracket-square" class="text-blue-600"></byte-icon>
        <span class="ml-2 text-xl font-bold">Brand</span>
      </a>
    </div>

    <div slot="items">
      <byte-nav-item current><a href="/">Home</a></byte-nav-item>
      <byte-nav-item><a href="/features">Features</a></byte-nav-item>
      <byte-nav-item><a href="/pricing">Pricing</a></byte-nav-item>
    </div>
  </byte-navbar>

Color Variants

Navbars support different color schemes to match your brand or create visual hierarchy.

Colored Navbars

100%

<div class="space-y-4">
    <byte-navbar color="zinc">
      <!-- Dark navbar content -->
    </byte-navbar>

    <byte-navbar color="blue">
      <!-- Blue navbar content -->
    </byte-navbar>

    <byte-navbar color="rose">
      <!-- Rose navbar content -->
    </byte-navbar>
  </div>

Navlist

The navlist component creates vertical navigation menus, perfect for sidebars and secondary navigation.

Basic Navlist

100%

Navigation

Dashboard

Team

Settings

<div class="w-64">
    <byte-navlist>
      <div slot="brand">
        <h2 class="text-lg font-semibold">Navigation</h2>
      </div>
      
      <div slot="items">
        <byte-navlist-item href="/" icon="home" current>
          Dashboard
        </byte-navlist-item>
        <byte-navlist-item href="/team" icon="users">
          Team
        </byte-navlist-item>
        <byte-navlist-item href="/settings" icon="cog-6-tooth">
          Settings
        </byte-navlist-item>
      </div>
    </byte-navlist>
  </div>

Grouped Navigation

Create structured navigation with grouped items and headers.

Grouped Navlist

100%

Main

Dashboard

Analytics

Team

Members

Projects

<div class="w-64">
    <byte-navlist>
      <div slot="items">
        <div class="px-3 py-2 text-xs font-medium text-zinc-500 uppercase">
          Main
        </div>
        <byte-navlist-item href="/" icon="home" current>
          Dashboard
        </byte-navlist-item>
        <byte-navlist-item href="/analytics" icon="chart-bar">
          Analytics
        </byte-navlist-item>

        <div class="mt-6 px-3 py-2 text-xs font-medium text-zinc-500 uppercase">
          Team
        </div>
        <byte-navlist-item href="/team" icon="users">
          Members
        </byte-navlist-item>
        <byte-navlist-item href="/projects" icon="folder">
          Projects
        </byte-navlist-item>
      </div>
    </byte-navlist>
  </div>

API Reference

Navbar Properties

Property

Type

Default

Description

color

string

'white'

Background color theme

Navlist Properties

Property

Type

Default

Description

color

string

'zinc'

Color theme for active items

Navigation Item Properties

Property

Type

Default

Description

current

boolean

false

Indicates active state

icon

string

Icon name (navlist only)

href

string

Navigation URL

Available Slots

Slot

Description

brand

Logo or brand content

items

Navigation items

Best Practices

Keep navigation items clear and concise
Use icons in navlists to improve visual recognition
Clearly indicate the current page or section
Group related navigation items together
Consider mobile responsiveness for navbars
Use consistent navigation patterns throughout your app

Pro tip: Use the current attribute to highlight the active navigation item and improve user orientation.