Header

Demos

Default

Fullscreen
import { Header, HeaderNavigation, HeaderNavigationItem } from 'marketing-ui'

function Demo() {
  return (
    <Header
      navigationToggleAriaLabel='Open menu'
      navigationToggleCloseAriaLabel='Close menu'
      navigationDrawerAriaLabel='Main navigation'
      searchToggleAriaLabel='Open search'
      searchToggleCloseAriaLabel='Close search'
      searchDrawerAriaLabel='Search'
      navigation={
        <HeaderNavigation aria-label='Main navigation'>
          <HeaderNavigationItem label='Products' active>
            <HeaderNavigationItem label='Car Care' href='#car-care' root />
            <HeaderNavigationItem label='Polishing' href='#polishing' root />
            <HeaderNavigationItem
              label='Categories'
              backLabel='Products'
            >
              <HeaderNavigationItem label='Interior' href='#interior' />
              <HeaderNavigationItem label='Exterior' href='#exterior' />
            </HeaderNavigationItem>
          </HeaderNavigationItem>
        </HeaderNavigation>
      }
      search={<input type='search' placeholder='Search…' />}
    />
  )
}

export default Demo

Invert

Fullscreen
import { Header, HeaderNavigation, HeaderNavigationItem } from 'marketing-ui'

function Demo() {
  return (
    <Header
      variant='invert'
      navigationToggleAriaLabel='Open menu'
      navigationToggleCloseAriaLabel='Close menu'
      navigationDrawerAriaLabel='Main navigation'
      searchToggleAriaLabel='Open search'
      searchToggleCloseAriaLabel='Close search'
      searchDrawerAriaLabel='Search'
      navigation={
        <HeaderNavigation aria-label='Main navigation'>
          <HeaderNavigationItem label='Products' active>
            <HeaderNavigationItem label='Car Care' href='#car-care' root />
            <HeaderNavigationItem label='Polishing' href='#polishing' root />
          </HeaderNavigationItem>
        </HeaderNavigation>
      }
      search={<input type='search' placeholder='Search…' />}
    />
  )
}

export default Demo

Props