Unofficial
A component that provides users with a list of pages to choose from.
| Name | Type | Default | Description |
|---|
A standard Navigation menu.
You can provide a hierarchy of links.
Deprecated
A horizontal Navigation menu that can be used as alternative to the main navigation menu.
<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",
},
]}
/>
<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",
},
]}
/>
<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",
},
]}
/>
<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",
},
]}
/>