Header

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;

import { Header, HeaderNavigation, HeaderNavigationItem } from "marketing-ui";

function Demo() {
  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
                body, html {
                    background-color: var(--ui-sonax-red);
                }
            `,
        }}
      />
      <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;