The SubNavigation is a toogleable part of the MainNavigation

```js
import {
  SubNavigation,
  SubNavigationHeader,
  SubNavigationTitle,
  SubNavigationLink,
  SubNavigationFilter,
  SubNavigationContent,
  SubNavigationList,
  SubNavigationGroup,
  SubNavigationItem,
} from '@wfp/ui';
```

```js
<SubNavigation>
  <SubNavigationHeader>
    <SubNavigationTitle>The Title of the SubNavigation</SubNavigationTitle>
    <SubNavigationLink>
      <Button small>The SubPage Link</Button>
    </SubNavigationLink>
    <SubNavigationFilter>
      <Search
        className="some-class"
        small
        id="search-2"
        labelText="Filter"
        placeHolderText="Filter"
      />
    </SubNavigationFilter>
  </SubNavigationHeader>
  <SubNavigationContent>
    <SubNavigationList>
      <SubNavigationGroup title="First List" columns>
        <SubNavigationItem>
          <Link href="https://go.docs.wfp.org" target="_blank">
            GoDocs
          </Link>
        </SubNavigationItem>
        {/* ...more SubNavigation Items */}
      </SubNavigationGroup>
      {/* ...more SubNavigation Groups */}
    </SubNavigationList>
  </SubNavigationContent>
</SubNavigation>
```

### SubNavigation

| Setting  | Default     | Options     | Role                                                                |
| -------- | ----------- | ----------- | ------------------------------------------------------------------- |
| children | `undefined` | `component` | Contains a `SubNavigationHeader` and `SubNavigationContent` Element |  |

### SubNavigationHeader

| Setting  | Default     | Options     | Role                                                                           |
| -------- | ----------- | ----------- | ------------------------------------------------------------------------------ |
| children | `undefined` | `component` | contains a `SubNavigationTitle`, `SubNavigationLink` and `SubNavigationFilter` |

### SubNavigationTitle

| Setting  | Default     | Options     | Role                    |
| -------- | ----------- | ----------- | ----------------------- |
| children | `undefined` | `component` | the SubNavigation title |

### SubNavigationLink

| Setting  | Default     | Options     | Role                                           |
| -------- | ----------- | ----------- | ---------------------------------------------- |
| children | `undefined` | `component` | a link to a overview of the MainNavigationItem |

### SubNavigationFilter

| Setting  | Default     | Options     | Role                         |
| -------- | ----------- | ----------- | ---------------------------- |
| children | `undefined` | `component` | filter options for the links |

### SubNavigationContent

| Setting  | Default     | Options     | Role               |
| -------- | ----------- | ----------- | ------------------ |
| children | `undefined` | `component` | content with links |

### SubNavigationList

| Setting    | Default     | Options   | Role                                                 |
| ---------- | ----------- | --------- | ---------------------------------------------------- |
| toogleable | `undefined` | `boolean` | Show options to show and hide the Blockquote         |
| light      | `None`      | `boolean` | no content                                           |
| code       | `None`      | `boolean` | Show content formated as code                        |
| innerHtml  | `undefined` | `string`  | Display content as `dangerouslySetInnerHTML` content |

### SubNavigationGroup

| Setting    | Default     | Options   | Role                                                 |
| ---------- | ----------- | --------- | ---------------------------------------------------- |
| toogleable | `undefined` | `boolean` | Show options to show and hide the Blockquote         |
| light      | `None`      | `boolean` | no content                                           |
| code       | `None`      | `boolean` | Show content formated as code                        |
| innerHtml  | `undefined` | `string`  | Display content as `dangerouslySetInnerHTML` content |

### SubNavigationItem

| Setting    | Default     | Options   | Role                                                 |
| ---------- | ----------- | --------- | ---------------------------------------------------- |
| toogleable | `undefined` | `boolean` | Show options to show and hide the Blockquote         |
| light      | `None`      | `boolean` | no content                                           |
| code       | `None`      | `boolean` | Show content formated as code                        |
| innerHtml  | `undefined` | `string`  | Display content as `dangerouslySetInnerHTML` content |
