Skip to main content
HomeComponentsHeader
warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
Go to the latest version

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:

thales logoProduct nameItem 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 dark:text-bluegrey-300 hidden medium:block pl-l">
      Product name
    </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 id="header-menu-1">
              <QtmMenuItemLabel>Menu Item</QtmMenuItemLabel>
            </QtmMenuItem>
            <QtmMenuItem id="header-menu-2">
              <QtmMenuItemLabel>Menu Item</QtmMenuItemLabel>
            </QtmMenuItem>
            <QtmMenuItem id="header-menu-3">
              <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.

thales logoProduct nameItem 1Item 2Item 3Item 4Item 5Dropdown buttonMenu ItemMenu ItemMenu Item
thales logoProduct nameItem 1Item 2Item 3Item 4Item 5Dropdown buttonMenu ItemMenu ItemMenu Item
thales logoProduct nameItem 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​

Loading API documentation...

HeaderBrand​

Loading API documentation...

HeaderDivider​

Loading API documentation...

HeaderMenu​

Loading API documentation...

HeaderMenuLeft​

Loading API documentation...

HeaderMenuRight​

Loading API documentation...

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab