Header Layouts

The header layout is the top section of your application that contains the main navigation and branding. It can be customized to include different elements like a search bar, user profile, and more.

Main Layout - With Secondary Sidebar

100%

Your Brand

Home

Features

Pricing

About

Overview

Team

Projects

Calendar

Documents

Reports

Settings

Dashboard Overview

Welcome to your dashboard. This is where you'll find all your important information.

Recent Activity

Your recent activity will appear here.

Statistics

Your statistics will appear here.

Updates

Your updates will appear here.

<!-- Main Layout -->
<div class="min-h-[20rem] bg-zinc-50">
  <!-- Top Navbar -->
  <byte-navbar color="green">
    <div slot="brand">
      <a href="/" class="flex items-center text-white">
        <byte-icon name="code-bracket-square"></byte-icon>
        <span class="ml-2 text-xl font-bold">Your Brand</span>
      </a>
    </div>

    <div slot="items">
      <byte-nav-item>
        <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>
      <byte-nav-item>
        <a href="/about">About</a>
      </byte-nav-item>
    </div>
  </byte-navbar>

  <!-- Content Area with Sidebar -->
  <div class="flex">
    <!-- Sidebar Navigation -->
    <byte-navlist color="green">
      <div slot="brand">
        <input type="text" placeholder="Search..." class="p-2 border border-zinc-300 rounded w-full" />
      </div>

      <div slot="items">

        <byte-navlist-item href="/dashboard" icon="home" current>
          Overview
        </byte-navlist-item>

        <byte-navlist-item href="/team" icon="users">
          Team
        </byte-navlist-item>
        
        <byte-navlist-item href="/projects" icon="folder">
          Projects
        </byte-navlist-item>
        
        <byte-navlist-item href="/calendar" icon="calendar">
          Calendar
        </byte-navlist-item>
        
        <byte-navlist-item href="/documents" icon="document-text">
          Documents
        </byte-navlist-item>
        
        <byte-navlist-item href="/reports" icon="chart-bar">
          Reports
        </byte-navlist-item>
        
        <byte-navlist-item href="/settings" icon="cog-6-tooth">
          Settings
        </byte-navlist-item>
      </div>
    </byte-navlist>

    <!-- Main Content -->
    <main class="flex-1 p-8">
      <div class="max-w-7xl mx-auto">
        <h1 class="text-2xl font-semibold text-zinc-900">Dashboard Overview</h1>
        
        <!-- Example content -->
        <div class="mt-6 bg-white shadow rounded-lg p-6">
          <p class="text-zinc-600">
            Welcome to your dashboard. This is where you'll find all your important information.
          </p>
        </div>

        <!-- More content sections -->
        <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <!-- Card 1 -->
          <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-zinc-900">Recent Activity</h3>
            <p class="mt-2 text-zinc-600">Your recent activity will appear here.</p>
          </div>

          <!-- Card 2 -->
          <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-zinc-900">Statistics</h3>
            <p class="mt-2 text-zinc-600">Your statistics will appear here.</p>
          </div>

          <!-- Card 3 -->
          <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-zinc-900">Updates</h3>
            <p class="mt-2 text-zinc-600">Your updates will appear here.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

Main Layout - No Sidebar