Slack

Algolia

What's New?

Getting Started

Foundations

Accessibility

Layout

CSS Utilities

Introduction

Header structure is a template that explains the areas in the header and how it work which helps combine other components to create a consistent user experience.

Default

Container: Using container to wrap header contents and grid system to set fix-width or full-width header.
Logo: Using this area for logo of the site.
Main content wrapper: Used to wrap all the header contents, except logo. This part is also replaced by a hamburger button on mobile.
Right: Often used to present icons, CTA buttons or components about users' account.
Left: Often used to display top menu of the site.

Absolute

Container: Using container to wrap header contents and grid system to set fix-width or full-width header.
Logo: Using this area for logo of the site.
Main content wrapper: Used to wrap all the header contents, except logo. This part is also replaced by a hamburger button on mobile.
Right: Often used to present icons, CTA buttons or components about users' account.
Absolute center-aligned objects: Using this area to display the components which are always center-aligned such as a countdown or session remaining component in workspace.

Examples

Desktop layout

Note: Only "LEFT" area or "CENTER" area is shown up at a time.

<Header>
  <Header.Brand>
    <Logo as={SafeAnchor} src="https://raw.githubusercontent.com/gotitinc/aha-assets/master/origin/ahaui-logo-with-text.svg" variant="original" height={32} />
  </Header.Brand>
  <Header.Main className="u-backgroundLightest">
    <Header.Left>
      <div className="u-paddingHorizontalLarge u-backgroundPrimaryLight">LEFT</div>
    </Header.Left>
    <Header.Right>
      <div className="u-paddingHorizontalLarge u-backgroundPositiveLight">RIGHT</div>
    </Header.Right>
  </Header.Main>
  <Header.AbsoluteCenter>
    <div className="u-paddingHorizontalLarge u-backgroundWarningLight">CENTER</div>
  </Header.AbsoluteCenter>
</Header>

<Header>
  <Header.Brand>
    <Logo as={SafeAnchor} src="https://raw.githubusercontent.com/gotitinc/aha-assets/master/origin/ahaui-logo-with-text.svg" variant="original" height={32} />
  </Header.Brand>
  <Header.Main className="u-backgroundLightest">
    <Header.Left>
      <div className="u-paddingHorizontalLarge u-backgroundPrimaryLight">LEFT</div>
    </Header.Left>
    <Header.Right>
      <div className="u-paddingHorizontalLarge u-backgroundPositiveLight">RIGHT</div>
    </Header.Right>
  </Header.Main>
  <Header.AbsoluteCenter>
    <div className="u-paddingHorizontalLarge u-backgroundWarningLight">CENTER</div>
  </Header.AbsoluteCenter>
</Header>

Mobile layout

<div className="u-paddingHorizontalSmall u-paddingVerticalExtraLarge" style={{ width: '100%', maxWidth: '407px', margin: '0 auto', borderRadius: '20px', backgroundColor: 'black' }}>
  <div className="u-backgroundWhite" style={{ height: '667px' }}>
    <HeaderMobile hasDropContext>
      <HeaderMobile.Context>
        <HeaderMobile.Brand>
          <Logo as={SafeAnchor} src="https://raw.githubusercontent.com/gotitinc/aha-assets/master/origin/ahaui-logo.svg"  height={32} />
        </HeaderMobile.Brand>
        <HeaderMobile.Main>
          <div className="u-paddingHorizontalLarge u-backgroundPositiveLight">[RIGHT]</div>
        </HeaderMobile.Main>
      </HeaderMobile.Context>
      <HeaderMobile.AfterContext>
      </HeaderMobile.AfterContext>
      <HeaderMobile.DropContext>
        <div className="u-paddingHorizontalLarge u-backgroundPositiveLighter">[Menu]</div>
      </HeaderMobile.DropContext>
    </HeaderMobile>
  </div>
</div>

<div className="u-paddingHorizontalSmall u-paddingVerticalExtraLarge" style={{ width: '100%', maxWidth: '407px', margin: '0 auto', borderRadius: '20px', backgroundColor: 'black' }}>
  <div className="u-backgroundWhite" style={{ height: '667px' }}>
    <HeaderMobile hasDropContext>
      <HeaderMobile.Context>
        <HeaderMobile.Brand>
          <Logo as={SafeAnchor} src="https://raw.githubusercontent.com/gotitinc/aha-assets/master/origin/ahaui-logo.svg"  height={32} />
        </HeaderMobile.Brand>
        <HeaderMobile.Main>
          <div className="u-paddingHorizontalLarge u-backgroundPositiveLight">[RIGHT]</div>
        </HeaderMobile.Main>
      </HeaderMobile.Context>
      <HeaderMobile.AfterContext>
      </HeaderMobile.AfterContext>
      <HeaderMobile.DropContext>
        <div className="u-paddingHorizontalLarge u-backgroundPositiveLighter">[Menu]</div>
      </HeaderMobile.DropContext>
    </HeaderMobile>
  </div>
</div>

Examples

() => {
  const [topMenuExcelchat, setTopMenuExcelchat] = useState('products.excelchat');
  return (
    <Header fullWidth>
      <Header.Brand>
        <Logo as={SafeAnchor} src="https://raw.githubusercontent.com/gotitinc/aha-assets/master/origin/ahaui-logo-with-text.svg" variant="original" height={40} />
      </Header.Brand>
      <Header.Main>
        <Header.Left>
          <TopMenu
            current={topMenuExcelchat}
            onSelect={setTopMenuExcelchat}
          >
            <TopMenu.Item eventKey="my_sessions">My sessions</TopMenu.Item>
            <TopMenu.Item eventKey="pricing">Pricing</TopMenu.Item>
          </TopMenu>
        </Header.Left>
        <Header.Right>
          <Dropdown alignRight className="u-marginLeftExtraSmall">
            <Dropdown.Toggle className="u-textLight u-lineHeightNone">
              <Icon name="contact" size="medium" />
            </Dropdown.Toggle>
            <Dropdown.Container className="u-paddingVerticalExtraSmall">
              <Dropdown.Item>
                <Icon name="setting" size="small" />
                <span className="u-marginLeftExtraSmall">My Profile</span>
              </Dropdown.Item>
              <Dropdown.Item>
                <Icon name="card" size="small" />
                <span className="u-marginLeftExtraSmall">Payment</span>
              </Dropdown.Item>
              <Dropdown.Item>
                <Icon name="power" size="small" />
                <span className="u-marginLeftExtraSmall">Logout</span>
              </Dropdown.Item>
            </Dropdown.Container>
          </Dropdown>
        </Header.Right>
      </Header.Main>
    </Header>
  );
};

() => {
  const [topMenuExcelchat, setTopMenuExcelchat] = useState('products.excelchat');
  return (
    <Header fullWidth>
      <Header.Brand>
        <Logo as={SafeAnchor} src="https://raw.githubusercontent.com/gotitinc/aha-assets/master/origin/ahaui-logo-with-text.svg" variant="original" height={40} />
      </Header.Brand>
      <Header.Main>
        <Header.Left>
          <TopMenu
            current={topMenuExcelchat}
            onSelect={setTopMenuExcelchat}
          >
            <TopMenu.Item eventKey="my_sessions">My sessions</TopMenu.Item>
            <TopMenu.Item eventKey="pricing">Pricing</TopMenu.Item>
          </TopMenu>
        </Header.Left>
        <Header.Right>
          <Dropdown alignRight className="u-marginLeftExtraSmall">
            <Dropdown.Toggle className="u-textLight u-lineHeightNone">
              <Icon name="contact" size="medium" />
            </Dropdown.Toggle>
            <Dropdown.Container className="u-paddingVerticalExtraSmall">
              <Dropdown.Item>
                <Icon name="setting" size="small" />
                <span className="u-marginLeftExtraSmall">My Profile</span>
              </Dropdown.Item>
              <Dropdown.Item>
                <Icon name="card" size="small" />
                <span className="u-marginLeftExtraSmall">Payment</span>
              </Dropdown.Item>
              <Dropdown.Item>
                <Icon name="power" size="small" />
                <span className="u-marginLeftExtraSmall">Logout</span>
              </Dropdown.Item>
            </Dropdown.Container>
          </Dropdown>
        </Header.Right>
      </Header.Main>
    </Header>
  );
};

API

Header

import { Header } from '@ahaui/react'Copy import code for the Header component

Name	Type	Default	Description
show	boolean	`true`	Whether or not the Header is visible.
innerClassName	string		Custom className for Inner

HeaderMobile.HeaderContext

import { HeaderMobile } from '@ahaui/react'Copy import code for the HeaderMobile component

Name	Type	Default	Description
classNameToggle	string

import { HeaderMobile } from '@ahaui/react'Copy import code for the HeaderMobile component

Name	Type	Default	Description
show	boolean	`true`	Whether or not the Header is visible.
hasDropContext	boolean		Define has DropContext
onToggle	function		A callback fired when the HeaderMobile wishes to change visibility. Called with the requested show value, the DOM event.

Header

Introduction#

Default#

Absolute#

Examples#

Desktop layout#

Mobile layout#

Examples#

API#

Header#

HeaderMobile.HeaderContext#

HeaderMobile#

Introduction

Default

Absolute

Examples

Desktop layout

Mobile layout

Examples

API

Header

HeaderMobile.HeaderContext

HeaderMobile