import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import BasicHeader from "examples/header-navigation/basic.tsx";
import WithSearch from "examples/header-navigation/with-search.tsx";

import {
  HeaderNavigation,
  ALIGN,
  StyledNavigationItem as NavigationItem,
  StyledNavigationList as NavigationList,
} from "baseui/header-navigation";
import * as HeaderNavigationExports from "baseui/header-navigation";

import Yard from "../../components/yard/index";
import headerNavigationYardConfig from "../../components/yard/config/header-navigation";

export default Layout;

# Header navigation

<Yard placeholderHeight={52} {...headerNavigationYardConfig} />

## Examples

<Example
  title="Header navigation basic usage"
  path="header-navigation/basic.tsx"
>
  <BasicHeader />
</Example>

<Example
  title="Header navigation with search"
  path="header-navigation/with-search.tsx"
>
  <WithSearch />
</Example>

<Exports
  component={HeaderNavigationExports}
  title="Header Navigation exports"
  path="baseui/header-navigation"
/>