Header

The header component is a responsive and versatile horizontal navigation bar with the following 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

<qtm-header>
  <qtm-header-brand classes="header-logo">
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/43/Thales.svg"
      alt="thales logo"
    />
    <qtm-typography classes="text-bluegrey-500 hidden medium:block pl-l">
      Design system
    </qtm-typography>
  </qtm-header-brand>
  <qtm-header-divider classes="hidden medium:block"></qtm-header-divider>
  <qtm-header-menu classes="overflow-x-clip">
    <qtm-header-menu-left classes="hidden small:flex overflow-x-auto">
      <qtm-tabs divider="false" fullHeight scrollHorizontally>
        <qtm-tab active classes="flex-shrink-0"> Item 1 </qtm-tab>
        <qtm-tab classes="flex-shrink-0">Item 2</qtm-tab>
        <qtm-tab classes="flex-shrink-0">Item 3</qtm-tab>
        <qtm-tab classes="flex-shrink-0">Item 4</qtm-tab>
        <qtm-tab classes="flex-shrink-0">Item 5</qtm-tab>
      </qtm-tabs>
    </qtm-header-menu-left>
    <qtm-header-menu-right>
      <qtm-dropdown>
        <qtm-dropdown-trigger>
          <qtm-button>Dropdown button</qtm-button>
        </qtm-dropdown-trigger>
        <qtm-dropdown-overlay>
          <qtm-menu-item-list>
            <qtm-menu-item>
              <qtm-menu-item-label>Menu Item</qtm-menu-item-label>
            </qtm-menu-item>
            <qtm-menu-item>
              <qtm-menu-item-label>Menu Item</qtm-menu-item-label>
            </qtm-menu-item>
            <qtm-menu-item>
              <qtm-menu-item-label>Menu Item</qtm-menu-item-label>
            </qtm-menu-item>
          </qtm-menu-item-list>
        </qtm-dropdown-overlay>
      </qtm-dropdown>
      <qtm-button variant="ghost" color="primary" classes="ml-s">
        <qtm-icon icon="notifications"></qtm-icon>
      </qtm-button>
    </qtm-header-menu-right>
  </qtm-header-menu>
</qtm-header>

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.

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

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.

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

Sizes

Header are available in three size: small, medium and large. You can use the attribute size 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

<qtm-header size="small">
  ...
  <qtm-tabs divider fullHeight scrollHorizontally size="small">...</qtm-tabs>
  ...
  <qtm-button size="small">Dropdown button</qtm-button>
  ...
  <qtm-menu-item-list size="small">...</qtm-menu-item-list>
</qtm-header>

<qtm-header size="medium"></qtm-header>

<qtm-header size="large"></qtm-header>

API

qtm-header

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
size	"large" | "medium" | "small"	'medium'	The size of the header container

qtm-header-brand

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

qtm-header-divider

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

qtm-header-menu

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

qtm-header-menu-left

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

qtm-header-menu-right

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing