Components
Navigation
SubNavigation

SubNavigation

Import statement

import { SubNavigation, SubNavigationHeader, SubNavigationTitle, SubNavigationLink, SubNavigationFilter, SubNavigationContent, SubNavigationList, SubNavigationGroup, SubNavigationItem } from "@wfp/react"

Usage

Expand code

Editable Example

import {
  SubNavigation,
  SubNavigationHeader,
  SubNavigationFilter,
  SubNavigationGroup,
  SubNavigationTitle,
  SubNavigationLink,
  Search,
  Link,
} from "@wfp/react";

<SubNavigation>
  <SubNavigationHeader>
    <SubNavigationTitle>The Title</SubNavigationTitle>
    <SubNavigationLink>
      <Button small>The SubPage Link</Button>
    </SubNavigationLink>
    <SubNavigationFilter>
      <Search
        className="some-class"
        kind="small"
        id="search-2"
        labelText="Filter"
        placeholder="Filter"
        onChange={() => {
          alert("Apply Filter");
        }}
      />
    </SubNavigationFilter>
  </SubNavigationHeader>
  <SubNavigationContent>
    <SubNavigationList>
      <SubNavigationGroup title="First List">
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
      </SubNavigationGroup>
      <SubNavigationGroup title="Second List of Items">
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
      </SubNavigationGroup>
      <SubNavigationGroup title="Third List of Items">
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
      </SubNavigationGroup>
      <SubNavigationGroup title="Four List of Items">
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
        <SubNavigationItem>
          <Link
            href="https://go.docs.wfp.org"
            target="_blank"
          >
            GoDocs
          </Link>
        </SubNavigationItem>
      </SubNavigationGroup>
    </SubNavigationList>
  </SubNavigationContent>
</SubNavigation>;

Example SubNavigation Header

Expand code

Editable Example

import {
  SubNavigationHeader,
  SubNavigationFilter,
  SubNavigationTitle,
  SubNavigationLink,
  Search,
} from "@wfp/react";

<SubNavigationHeader>
  <SubNavigationTitle>The Title</SubNavigationTitle>
  <SubNavigationLink>
    <Button small>The SubPage Link</Button>
  </SubNavigationLink>

  <SubNavigationFilter>
    <Search
      kind="small"
      id="search-2"
      labelText="Filter"
      placeholder="Filter list"
    />
  </SubNavigationFilter>
</SubNavigationHeader>;

Example SubNavigation Title

Editable Example

import { SubNavigationTitle } from "@wfp/react";

<SubNavigationTitle>The Title</SubNavigationTitle>;

Example SubNavigation Content

Editable Example

import { SubNavigationContent } from "@wfp/react";

<SubNavigationContent>
  {" "}
  Some content here
</SubNavigationContent>;

Example SubNavigation List

Expand code

Editable Example

import {
  SubNavigationGroup,
  SubNavigationItem,
  SubNavigationList,
  Link,
} from "@wfp/react";

<SubNavigationList>
  <SubNavigationGroup title="First List" columns={1}>
    <SubNavigationItem>
      <Link href="https://wfp.org">First link</Link>
    </SubNavigationItem>
    <SubNavigationItem>
      <Link href="https://go.docs.wfp.org">
        second link
      </Link>
    </SubNavigationItem>
  </SubNavigationGroup>
</SubNavigationList>;

Example SubNavigation Group

Expand code

Editable Example

import {
  SubNavigationGroup,
  SubNavigationItem,
  Link,
} from "@wfp/react";

<SubNavigationGroup>
  <SubNavigationItem>
    <Link href="https://wfp.org">First link</Link>
  </SubNavigationItem>
  <SubNavigationItem>
    <Link href="https://go.docs.wfp.org">
      second link
    </Link>
  </SubNavigationItem>
</SubNavigationGroup>;

On this page

References