Skip to main content
🏠ComponentsHeader

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:

<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 divider={false} fullHeight scrollHorizontally>
        <Tab active classes="flex-shrink-0">
          Item 1
        </Tab>
        <Tab classes="flex-shrink-0">Item 2</Tab>
        <Tab classes="flex-shrink-0">Item 3</Tab>
        <Tab classes="flex-shrink-0">Item 4</Tab>
        <Tab classes="flex-shrink-0">Item 5</Tab>
      </Tabs>
    </HeaderMenuLeft>
    <HeaderMenuRight>
      <Dropdown>
        <DropdownTrigger>
          <Button>Dropdown button</Button>
        </DropdownTrigger>
        <DropdownOverlay>
          <MenuItemList>
            <MenuItem>
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
            <MenuItem>
              <MenuItemLabel>Menu Item</MenuItemLabel>
            </MenuItem>
            <MenuItem>
              <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.

<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​

Loading API documentation...

HeaderBrand​

Loading API documentation...

HeaderDivider​

Loading API documentation...

HeaderMenu​

Loading API documentation...

HeaderMenuLeft​

Loading API documentation...

HeaderMenuRight​

Loading API documentation...