Header

Plain CSS implementation of the Figma Header section, node 4488:19770.

Default

Seventh

Versao beta

PA JD WD

Secondary

Seventh

Project workspace

Camera layout

Product Example

Seventh

Calculadora de projetos

PA JD WD

The calculator label is documentation content only. Public CSS classes remain product-neutral.

CSS API

Compose buttons, breadcrumbs, icons, and account controls inside the header slots. Navigation and action behavior stay with the consuming application.

<header class="sui-header">
  <div class="sui-header__leading">
    <button class="sui-header__icon-button" type="button" aria-label="Open navigation">...</button>
    <div class="sui-header__content">
      <h1 class="sui-header__title">Page title</h1>
      <nav class="sui-header__breadcrumb">...</nav>
    </div>
  </div>
  <div class="sui-header__actions">...</div>
</header>

Default

Secondary

Breadcrumb And Actions

Product Example

CSS API