Components

<nav class="not-govuk-navigation-menu">
  <ul class="not-govuk-navigation-menu__list">
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/styles"
        data-discover="true"
      >
        Inactive 1
      </a>
    </li>
    <li
      class="not-govuk-navigation-menu__list__item not-govuk-navigation-menu__list__item--active"
    >
      <a
        class="not-govuk-navigation-menu__list__link not-govuk-navigation-menu__list__link--active"
        href="#main-content"
      >
        Active
      </a>
    </li>
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/contributing"
        data-discover="true"
      >
        Inactive 2
      </a>
    </li>
  </ul>
</nav>

<NavigationMenu
  items={[
    {
      href: "/styles",
      text: "Inactive 1",
    },
    {
      href: "#main-content",
      text: "Active",
    },
    {
      href: "/contributing",
      text: "Inactive 2",
    },
  ]}
/>

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
items	Item[]	-	REQUIRED. List of links to choose from

Stories

Standard

A standard Navigation menu.

HTML
React

<nav class="not-govuk-navigation-menu">
  <ul class="not-govuk-navigation-menu__list">
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/styles"
        data-discover="true"
      >
        Inactive 1
      </a>
    </li>
    <li
      class="not-govuk-navigation-menu__list__item not-govuk-navigation-menu__list__item--active"
    >
      <a
        class="not-govuk-navigation-menu__list__link not-govuk-navigation-menu__list__link--active"
        href="#main-content"
      >
        Active
      </a>
    </li>
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/contributing"
        data-discover="true"
      >
        Inactive 2
      </a>
    </li>
  </ul>
</nav>

<NavigationMenu
  items={[
    {
      href: "/styles",
      text: "Inactive 1",
    },
    {
      href: "#main-content",
      text: "Active",
    },
    {
      href: "/contributing",
      text: "Inactive 2",
    },
  ]}
/>

Sub-items

You can provide a hierarchy of links.

HTML
React

<nav class="not-govuk-navigation-menu">
  <ul class="not-govuk-navigation-menu__list">
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/styles"
        data-discover="true"
      >
        Inactive 1
      </a>
    </li>
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/components"
        data-discover="true"
      >
        Active
      </a>
    </li>
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/contributing"
        data-discover="true"
      >
        Inactive 2
      </a>
    </li>
  </ul>
</nav>

<NavigationMenu
  items={[
    {
      href: "/styles",
      items: [
        {
          href: "/styles?name=Forms",
          text: "One",
        },
        {
          href: "/styles?name=Typography",
          text: "Two",
        },
      ],
      text: "Inactive 1",
    },
    {
      href: "/components",
      items: [
        {
          href: "/components?name=Back%20link",
          text: "Inactive 1",
        },
        {
          href: "/components?name=Navigation%20menu",
          text: "Active",
        },
        {
          href: "/components?name=Button",
          text: "Inactive 2",
        },
      ],
      text: "Active",
    },
    {
      href: "/contributing",
      text: "Inactive 2",
    },
  ]}
/>

Horizontal

Deprecated

A horizontal Navigation menu that can be used as alternative to the main navigation menu.

HTML
React

<nav
  class="not-govuk-navigation-menu not-govuk-navigation-menu--horizontal"
>
  <ul class="not-govuk-navigation-menu__list">
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/styles"
        data-discover="true"
      >
        Inactive 1
      </a>
    </li>
    <li
      class="not-govuk-navigation-menu__list__item not-govuk-navigation-menu__list__item--active"
    >
      <a
        class="not-govuk-navigation-menu__list__link not-govuk-navigation-menu__list__link--active"
        href="#main-content"
      >
        Active
      </a>
    </li>
    <li class="not-govuk-navigation-menu__list__item">
      <a
        class="not-govuk-navigation-menu__list__link"
        href="/contributing"
        data-discover="true"
      >
        Inactive 2
      </a>
    </li>
  </ul>
</nav>

<NavigationMenu
  classModifiers="horizontal"
  items={[
    {
      href: "/styles",
      text: "Inactive 1",
    },
    {
      href: "#main-content",
      text: "Active",
    },
    {
      href: "/contributing",
      text: "Inactive 2",
    },
  ]}
/>