Dashboard Layout

Application-style layout with a fixed header.

Basic Structure

Use data-layout="dashboard" on the body element:

<body data-layout="dashboard">
  <header>
    <nav>
      <a href="#"><strong>App Name</strong></a>
      <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Dashboard</h1>
    <p>Your application content.</p>
  </main>
</body>

Key Differences from Website Layout

  • Fixed header - Header stays at the top when scrolling
  • No footer - Designed for app-style interfaces
  • Full height - Main content fills available space
  • App-like feel - Better for tools, dashboards, and admin panels

Dashboard Navigation

<header>
  <nav>
    <a href="#"><strong>Admin Panel</strong></a>
    <ul>
      <li><a href="#">Users</a></li>
      <li><a href="#">Analytics</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>
</header>

Dashboard Content

Analytics

Total Users

1,234

Revenue

$12,345

Active Sessions

89

<main>
  <h1>Analytics</h1>

  <div role="grid">
    <article>
      <h3>Total Users</h3>
      <p style="font-size: 2rem; font-weight: bold;">1,234</p>
    </article>
    <article>
      <h3>Revenue</h3>
      <p style="font-size: 2rem; font-weight: bold;">$12,345</p>
    </article>
    <article>
      <h3>Active Sessions</h3>
      <p style="font-size: 2rem; font-weight: bold;">89</p>
    </article>
  </div>
</main>

When to Use Dashboard Layout

  • Admin panels
  • User dashboards
  • SaaS applications
  • Settings pages
  • Any app where the header should stay visible