Header

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

QtmHeader: the main container which comprises:

• QtmHeaderBrand: the left side, which can contain the logo, the hamburger icon, the product name
• QtmHeaderDivider: the vertical line to separate header sides
• QtmHeaderMenu: the right side which comprises:
  • QtmHeaderMenuLeft: the left part of the header-menu, which grows or shrinks to fit the space available in its flex header-menu.
  • QtmHeaderMenuRight: 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

<QtmHeader>
  <QtmHeaderBrand classes="header-logo">
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/43/Thales.svg"
      alt="thales logo"
    />
    <QtmTypography classes="text-bluegrey-500 hidden medium:block pl-l">
      Design system
    </QtmTypography>
  </QtmHeaderBrand>
  <QtmHeaderDivider classes="hidden medium:block"></QtmHeaderDivider>
  <QtmHeaderMenu classes="overflow-x-clip">
    <QtmHeaderMenuLeft classes="hidden small:flex overflow-x-auto">
      <QtmTabs divider={false} fullHeight scrollHorizontally>
        <QtmTab active classes="flex-shrink-0">
          Item 1
        </QtmTab>
        <QtmTab classes="flex-shrink-0">Item 2</QtmTab>
        <QtmTab classes="flex-shrink-0">Item 3</QtmTab>
        <QtmTab classes="flex-shrink-0">Item 4</QtmTab>
        <QtmTab classes="flex-shrink-0">Item 5</QtmTab>
      </QtmTabs>
    </QtmHeaderMenuLeft>
    <QtmHeaderMenuRight>
      <QtmDropdown>
        <QtmDropdownTrigger>
          <QtmButton>Dropdown button</QtmButton>
        </QtmDropdownTrigger>
        <QtmDropdownOverlay>
          <QtmMenuItemList>
            <QtmMenuItem>
              <QtmMenuItemLabel>Menu Item</QtmMenuItemLabel>
            </QtmMenuItem>
            <QtmMenuItem>
              <QtmMenuItemLabel>Menu Item</QtmMenuItemLabel>
            </QtmMenuItem>
            <QtmMenuItem>
              <QtmMenuItemLabel>Menu Item</QtmMenuItemLabel>
            </QtmMenuItem>
          </QtmMenuItemList>
        </QtmDropdownOverlay>
      </QtmDropdown>
      <QtmButton variant="ghost" color="primary" classes="ml-s">
        <QtmIcon icon="notifications"></QtmIcon>
      </QtmButton>
    </QtmHeaderMenuRight>
  </QtmHeaderMenu>
</QtmHeader>

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.

<QtmHeader classes="fixed bottom-0">...</QtmHeader>

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.

<QtmHeaderMenuLeft classes="hidden medium:flex">...</QtmHeaderMenuLeft>

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

<QtmHeader size="small">
  ...
  <QtmTabs divider fullHeight scrollHorizontally size="small">...</QtmTabs>
  ...
  <QtmButton size="small">Dropdown button</QtmButton>
  ...
  <QtmMenuItemList size="small">...</QtmMenuItemList>
</QtmHeader>

<QtmHeader size="medium"></QtmHeader>

<QtmHeader size="large"></QtmHeader>

API

QtmHeader

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

QtmHeaderBrand

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

QtmHeaderDivider

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

QtmHeaderMenu

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

QtmHeaderMenuLeft

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

QtmHeaderMenuRight

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