Header | Quantum Design System Documentation

The Header component is a container for a HeaderBrand, a HeaderDivider and a HeaderMenu.

HeaderBrand is the container for a logo.
HeaderDivider is a vertical divider.
HeaderMenu is the container for a HeaderMenuLeft and a HeaderMenuRight.

<Header>
  <HeaderBrand classes="header-logo">
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/43/Thales.svg"
      alt="thales logo"
    />
    <Typography classes="text-bluegrey-500 dark:text-bluegrey-300 hidden medium:block pl-l">
      Product name
    </Typography>
  </HeaderBrand>
  <HeaderDivider />
  <HeaderMenu>
    <HeaderMenuLeft>
      <Tabs divider fullHeight scrollHorizontally>
        <Tab active>
          <Typography>Tab 1</Typography>
        </Tab>
        <Tab>
          <Typography>Tab 2</Typography>
        </Tab>
        <Tab>
          <Typography>Tab 3</Typography>
        </Tab>
      </Tabs>
    </HeaderMenuLeft>
    <HeaderMenuRight>
      <Dropdown>
        <DropdownTrigger>
          <Button>Dropdown button</Button>
        </DropdownTrigger>
        <DropdownOverlay>
          <MenuItemList>
            <MenuItem id="menu-item-1">
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
            <MenuItem id="menu-item-2">
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
            <MenuItem id="menu-item-3">
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
          </MenuItemList>
        </DropdownOverlay>
      </Dropdown>
    </HeaderMenuRight>
  </HeaderMenu>
</Header>

Sizes

Header are available in three size: small, medium and large. You can use the attribute size to control height and padding of header.

<Header size="small">
  ...
  <Tabs divider fullHeight scrollHorizontally size="small">...</Tabs>
  ...
  <Button size="small">Dropdown button</Button>
  ...
  <MenuItemList size="small">...</MenuItemList>
</Header>

<Header size="medium"></Header>

<Header size="large"></Header>

Event handling

Not applicable. The Header component and its sub-components (HeaderBrand, HeaderDivider, HeaderMenu, HeaderMenuLeft, HeaderMenuRight) are layout components and do not support any event handlers. Event handling should be implemented on the interactive elements inside the header, such as buttons, tabs, or dropdowns.

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

Sizes​

Event handling​

API​