@govuk-react/top-nav

Styled top navigation header with numerous constituent parts input as props.

Stats

StarsIssuesVersionUpdatedCreatedSize
@govuk-react/top-nav
0.9.112 days ago3 years agoMinified + gzip package size for @govuk-react/top-nav in KB

Readme

TopNav

Import

  import TopNav from '@govuk-react/top-nav';

Usage

TopNav with logo, service title and navigation items

import { SearchBox, TopNav } from 'govuk-react';
import CrownIcon from '@govuk-react/icon-crown';

const link = 'https://example.com?=1';

const Company = (
  <TopNav.Anchor href={link} target="new">
    <TopNav.IconTitle icon={<CrownIcon width="36" height="32" />}>GOV.UK</TopNav.IconTitle>
  </TopNav.Anchor>
);

const ServiceTitle = (
  <TopNav.NavLink href={link} target="new">
    Service Title
  </TopNav.NavLink>
);

const Search = (
  <SearchBox>
    <SearchBox.Input placeholder="Search GOV.UK" />
    <SearchBox.Button />
  </SearchBox>
);

<TopNav company={Company} serviceTitle={ServiceTitle} search={Search} active={0}>
  <TopNav.NavLink href="https://example.com?q=catdog" target="new">Navigation item #1</TopNav.NavLink>
  <TopNav.NavLink href="https://example.com?q=dogcat" target="new">Navigation item #2</TopNav.NavLink>
</TopNav>

With React Router

import { BrowserRouter, Link } from 'react-router-dom';
import { TopNav } from 'govuk-react';
import CrownIcon from '@govuk-react/icon-crown';

const reactRouterLink = '/section';
const CompanyLink = (
  <TopNav.Anchor as={Link} to={reactRouterLink}>
    <TopNav.IconTitle icon={<CrownIcon width="36" height="32" />}>GOV.UK</TopNav.IconTitle>
  </TopNav.Anchor>
);

const ServiceTitleLink = (
  <TopNav.NavLink as={Link} to={reactRouterLink}>
    Service Title
  </TopNav.NavLink>
);

<BrowserRouter>
  <TopNav company={CompanyLink} serviceTitle={ServiceTitleLink} />
</BrowserRouter>

References:

TODO:

  • TODO: this component is a work in progress and needs to more closely match existing examples
  • TODO: is TopNav the right name? What's it called in other GDS styles/patterns?
  • TODO: (The name Header is ambiguous)
  • TODO: #205 Use context api and/or render props for active navigation items
  • TODO: Vertical alignment here needs some work, perhaps should be its own component
  • TODO: Icon should be lined up with font baseline, e.g. vertical-align: baseline

Properties

Prop Required Default Type Description
bgColor BLACK string Top nav background color
children undefined node List Navigation items with anchor tags e.g. NavAnchor components
color WHITE string Top nav text color
company <IconTitle icon={<CrownIcon width="36" height="32" />}>GOV.UK</IconTitle> node Company component e.g. GOV UK
defaultOpen false bool Is the mobile navigation open by default?
search false node Search component
serviceTitle undefined node Service title component e.g. Food Standards Authority

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.