---
name: Navigation disclosure
route: /components/common/navigation-disclosure
edit: false
---

import { Playground, Props } from 'docz'
import NavigationDisclosure from './navigation-disclosure'
import NavigationDisclosureIcon from './navigation-disclosure-icon'

# NavigationDisclosure
**SUBCATEGORY:** Controls

<hr />

## Navigation disclosure
### Description
For triggering a change in the interface in order to show or hide navigation.

<Playground>
  <NavigationDisclosure
    text='Navigation disclosure'
    href='#'
  />
</Playground>

**Selected**

<Playground>
  <NavigationDisclosure
    text='Navigation disclosure'
    href='#'
    expanded
  />
</Playground>

<hr />

## Navigation disclosure + icon
### Description
For triggering a change in the interface in order to show or hide navigation. Icons can add extra definition.

<Playground>
  <NavigationDisclosureIcon
    text='Navigation disclosure + icon'
    href='#'
    icon='account'
  />
</Playground>

**Selected**

<Playground>
  <NavigationDisclosureIcon
    text='Navigation disclosure + icon'
    href='#'
    icon='account'
    expanded
  />
</Playground>

<hr />

## Navigation disclosure (inverse)
### Description
For triggering a change in the interface in order to show or hide navigation.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationDisclosure
    text='Navigation disclosure'
    href='#'
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationDisclosure
    text='Navigation disclosure'
    href='#'
    inverse
    expanded
  />
</Playground>

<hr />

## Navigation disclosure + icon (inverse)
### Description
For triggering a change in the interface in order to show or hide navigation. Icons can add extra definition.
<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationDisclosureIcon
    text='Navigation disclosure + icon'
    alt='Navigation disclosure + icon'
    href='#'
    icon='account'
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationDisclosureIcon
    text='Navigation disclosure + icon'
    alt='Navigation disclosure + icon'
    href='#'
    icon='account'
    inverse
    expanded
  />
</Playground>

<hr />

## Properties
<Props of={NavigationDisclosure} />
