kleradesign

layouttopnav

DESIGN.md

topnav

the top header row. 100px tall, fills right of the brand corner. justify-between layout — left side for context (breadcrumb / search / page title); right side for identity, notifications, logout, or external links.

not a separate component — it's the topnav slot of DashboardShell. for the design app you're reading right now, the topnav holds the breadcrumb on the left and a DESIGN.md link on the right.

import from @klera/ui/components/dashboard/DashboardShell (topnav slot)

Height: 100px (var --shell-topnav-height) · Padding: 0 32px · Border-bottom: 1px var(--divider) · Layout: flex with justify-between.

variants

what apps put here
  • left: breadcrumb (design app), search input (patient/provider/hq), or page-context line.
  • right: identity + notifications + logout (production apps), or external links / view-source (dev tools).
  • on tablet (<1280) the brand corner collapses — apps put a hamburger here to open a drawer with the sidenav contents.