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:

Product name

Item 1

Item 2

Item 3

Item 4

Item 5

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.

Product name

Item 1

Item 2

Item 3

Item 4

Item 5

Menu Item

Menu Item

Menu Item

Product name

Item 1

Item 2

Item 3

Item 4

Item 5

Menu Item

Menu Item

Menu Item

Product name

Item 1

Item 2

Item 3

Item 4

Item 5

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

Header

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