Header

The header component is a responsive and versatile horizontal navigation bar with the following classes structure:

qtm-header: the main container which comprises:

• qtm-header-brand: the left side, which can contain the logo, the hamburger icon, the product name
• qtm-header-divider: the vertical line to separate header sides
• qtm-header-menu: the right side which comprises:
  • qtm-header-menu-left: the left part of the header-menu, which grows or shrinks to fit the space available in its flex header-menu.
  • qtm-header-menu-right: the right part of the header-menu, which is always at the end of the header

Basic header

To get started quickly, here is what a complete basic header looks like:

Design systemItem 1Item 2Item 3Item 4Item 5Dropdown buttonMenu ItemMenu ItemMenu Item

<div class="qtm-header">
  <div class="qtm-header-brand">
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/43/Thales.svg"
      alt="thales logo"
    />
    <span class="text-bluegrey-500 hidden medium:block pl-l"
      >Design system</span
    >
  </div>
  <div class="qtm-header-divider hidden medium:block"></div>
  <div class="qtm-header-menu overflow-x-clip">
    <div class="qtm-header-menu-left hidden small:flex overflow-x-auto">
      <div class="qtm-tabs h-full">
        <div class="qtm-tab flex-shrink-0 qtm-active" tabindex="0">Item 1</div>
        <div class="qtm-tab flex-shrink-0" tabindex="0">Item 2</div>
        <div class="qtm-tab flex-shrink-0" tabindex="0">Item 3</div>
        <div class="qtm-tab flex-shrink-0" tabindex="0">Item 4</div>
        <div class="qtm-tab flex-shrink-0" tabindex="0">Item 5</div>
      </div>
    </div>
    <div class="qtm-header-menu-right">
      <div class="qtm-dropdown">
        <div class="qtm-dropdown-trigger">
          <button class="qtm-button qtm-filled qtm-primary">
            Dropdown button
          </button>
        </div>
        <div class="qtm-dropdown-overlay">
          <ul class="qtm-menu-item-list">
            <li class="qtm-menu-item">
              <span class="qtm-menu-item-label">Menu item</span>
            </li>
            <li class="qtm-menu-item">
              <span class="qtm-menu-item-label">Menu item</span>
            </li>
            <li class="qtm-menu-item">
              <span class="qtm-menu-item-label">Menu item</span>
            </li>
          </ul>
        </div>
      </div>
      <button class="qtm-button qtm-ghost qtm-primary ml-s" tabindex="0">
        <i class="material-icons qtm-icon">notifications</i>
      </button>
    </div>
  </div>
</div>

Fixed header

You can now fix the header to either the top or bottom of the page.

Add the fixed utility class with top-0 or bottom-0 to the header component.

<div class="qtm-header fixed bottom-0">...</div>

Responsiveness

Responsiveness will depend on the use case, and it should be decided which components are more important than others. If, for example, the button is more important than the tabs, then the button could stay and the tabs be removed instead.

Read the responsive guide to get more details.

<div class="qtm-header-menu-left hidden medium:flex">...</div>

Sizes

Header are available in three sizes with the following classes: qtm-small, qtm-medium and qtm-large. You can use these classes to control height and padding of header.

Design systemItem 1Item 2Item 3Item 4Item 5Dropdown buttonMenu ItemMenu ItemMenu Item

Design systemItem 1Item 2Item 3Item 4Item 5Dropdown buttonMenu ItemMenu ItemMenu Item

Design systemItem 1Item 2Item 3Item 4Item 5Dropdown buttonMenu ItemMenu ItemMenu Item

<div class="qtm-header qtm-small">
  ...
  <div class="qtm-tabs h-full qtm-small">...</div>
  ...
  <button class="qtm-button qtm-filled qtm-primary qtm-small">
    Dropdown button
  </button>
  ...
  <ul class="qtm-menu-item-list qtm-small"></ul>
  ...
</div>

<div class="qtm-header qtm-medium">...</div>

<div class="qtm-header qtm-large">...</div>