import Link from '../../components/Link';
import Blockquote from '../../components/Blockquote';
import Button from '../../components/Button';
import { iconArrowRight } from '@wfp/icons';

<Meta
  title="Documentation/Guidelines/Navigation"
  subtitle="3-Level Navigation"
  parameters={{
    componentSubtitle: 'Guidelines',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

<hr/>

### Main (Primary) Navigation

The Main Navigation is a Horizontal Menu which consists of multiple
clickable items placed at the top of the page. The navigation stays
unchanged when browswing through the site and is present on every page.
The currently selected item is usually highlighted.

<Blockquote>
  The maximum number of items is 6 to 8 items depending on the average word
  length.
</Blockquote>

[Go to MainNavigation](./?path=/docs/components-navigations-mainnavigation--regular)

### Sub Navigation

Sub navigation is for content that is of secondary interest to the user.
It is related to an item of the Main Navigation and usually presents a
more detailed selection if the former. It is attached to the Main
Navigation and present on every page.

[Go to SubNavigation](./?path=/docs/components-navigations-subnavigation--regular-sub-navigation)

### Secondary Navigation

The Secondary Navigation splits a page in logical sections. It's content is
related to the selected page and it is optional.

[Go to SecondaryNavigation](./?path=/docs/components-navigations-secondarynavigation--regular)

### Banner Navigation

The Banner Navigation adds additional links to other websites. Each Link
should target to a new tab. It is additional and should only cover
external links.

[Go to BannerNavigation](./?path=/docs/components-navigations-bannernavigation--regular-navigation)
