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:

Header: the main container which comprises:

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

Menu Item
Menu Item
Menu Item
<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 classes="hidden medium:block"></HeaderDivider>
  <HeaderMenu classes="overflow-x-clip">
    <HeaderMenuLeft classes="hidden small:flex overflow-x-auto">
      <Tabs activeId="header-item-1" divider={false} fullHeight scrollHorizontally>
        <Tab id="header-item-1" classes="flex-shrink-0">Item 1</Tab>
        <Tab id="header-item-2" classes="flex-shrink-0">Item 2</Tab>
        <Tab id="header-item-3" classes="flex-shrink-0">Item 3</Tab>
        <Tab id="header-item-4" classes="flex-shrink-0">Item 4</Tab>
        <Tab id="header-item-5" classes="flex-shrink-0">Item 5</Tab>
      </Tabs>
    </HeaderMenuLeft>
    <HeaderMenuRight>
      <Dropdown>
        <DropdownTrigger>
          <Button>Dropdown button</Button>
        </DropdownTrigger>
        <DropdownOverlay>
          <MenuItemList>
            <MenuItem id="header-menu-1">
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
            <MenuItem id="header-menu-2">
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
            <MenuItem id="header-menu-3">
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
          </MenuItemList>
        </DropdownOverlay>
      </Dropdown>
      <Button variant="ghost" color="primary" classes="ml-s">
        <Icon icon="notifications"></Icon>
      </Button>
    </HeaderMenuRight>
  </HeaderMenu>
</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.

<Header classes="fixed bottom-0">...</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.

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

Sizes​

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

Menu Item
Menu Item
Menu Item
Menu Item
Menu Item
Menu Item
Menu Item
Menu Item
Menu Item
<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>

API​

The Header component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

HeaderBrand​

The HeaderBrand component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

HeaderDivider​

The HeaderDivider component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, and event handlers). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

However, HeaderDivider doesn't accept any children.

Loading API documentation...

HeaderMenu​

The HeaderMenu component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

HeaderMenuLeft​

The HeaderMenuLeft component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

HeaderMenuRight​

The HeaderMenuRight component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

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

Submit an issue on GitLab