@leafygreen-ui/side-nav
leafyGreen UI Kit Side Nav
Last updated a month ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/side-nav 
SYNC missed versions from official npm registry.

Side Nav

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/side-nav

NPM

npm install @leafygreen-ui/side-nav

Peer Dependencies

Package Version
@leafygreen-ui/leafygreen-provider ^1.1.0

Example

import { SideNav, SideNavGroup, SideNavItem } from '@leafygreen-ui/side-nav';

const header = (
  <div>
    <strong>Polymorphism</strong>
    <br />
    <small>(content header)</small>
  </div>
);

return (
  <SideNav>
    <SideNavGroup header="States">
      <SideNavItem active>Active State</SideNavItem>
      <SideNavItem disabled>Disabled State</SideNavItem>
    </SideNavGroup>
    <SideNavGroup header={header}>
      <SideNavItem>Default root element (button)</SideNavItem>
      <SideNavItem href="/">Anchor root element</SideNavItem>
      <SideNavItem as="label" htmlFor="docs-input">
        Custom root element (label)
        <input
          id="docs-input"
          type="text"
          value=""
          placeholder="placeholder text"
          disabled
        />
      </SideNavItem>
    </SideNavGroup>
  </SideNav>
);

Output HTML

<nav class="leafygreen-ui-1inivuc" aria-label="side-nav">
  <ul class="leafygreen-ui-bdnco">
    <li>
      <h4 class="leafygreen-ui-19w7vet">States</h4>
      <ul role="menu" class="leafygreen-ui-bdnco">
        <li role="none">
          <button
            data-leafygreen-ui="side-nav-item-container"
            class="leafygreen-ui-d18uaj"
            role="menuitem"
            aria-current="page"
            aria-disabled="false"
          >
            <div class="leafygreen-ui-1mikaeo">Active State</div>
          </button>
        </li>
        <li role="none">
          <button
            data-leafygreen-ui="side-nav-item-container"
            class="leafygreen-ui-g84goy"
            role="menuitem"
            aria-current="false"
            aria-disabled="true"
            tabindex="-1"
          >
            <div class="leafygreen-ui-18g544y">Disabled State</div>
          </button>
        </li>
      </ul>
    </li>
    <li>
      <div>
        <strong>Polymorphism</strong><br />
        <small>(content header)</small>
      </div>
      <ul role="menu" class="leafygreen-ui-bdnco">
        <li role="none">
          <button
            data-leafygreen-ui="side-nav-item-container"
            class="leafygreen-ui-1b8asku"
            role="menuitem"
            aria-current="false"
            aria-disabled="false"
          >
            <div class="leafygreen-ui-f3d0a6">
              Default root element (button)
            </div>
          </button>
        </li>
        <li role="none">
          <a
            href="/"
            data-leafygreen-ui="side-nav-item-container"
            class="leafygreen-ui-1b8asku"
            role="menuitem"
            aria-current="false"
            aria-disabled="false"
          >
            <div class="leafygreen-ui-f3d0a6">Anchor root element</div>
          </a>
        </li>
        <li role="none">
          <label
            for="docs-input"
            data-leafygreen-ui="side-nav-item-container"
            class="leafygreen-ui-1b8asku"
            role="menuitem"
            aria-current="false"
            aria-disabled="false"
          >
            <div class="leafygreen-ui-f3d0a6">
              Custom root element (label)
              <input
                id="docs-input"
                type="text"
                placeholder="placeholder text"
                disabled=""
                value=""
              />
            </div>
          </label>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Properties

Prop Type Description Default
className string Class name that will be applied to the root-level element. undefined
children node Content that will be rendered inside the root-level element. undefined

Any other properties will be spread on the root-level element.

Side Nav Group

Properties

Prop Type Description Default
className string Class name that will be applied to the root-level element. undefined
header string | node Content that will be rendered as the component's header.
If a string is provided, it will be rendered with default styling as a header tag.
undefined
children node Content that will be rendered inside the root-level element. undefined
collapsible boolean Determines whether or not the Group is collapsible false
initialCollapsed boolean Determines whether or not the SideNavGroup should be collapsed on the first render. true

Any other properties will be spread on the root-level element.

Side Nav Item

Properties

Prop Type Description Default
active boolean Whether or not the component should be rendered in an active state. false
disabled boolean Whether or not the component should be rendered in a disabled state. false
ariaCurrentValue enum The aria-current attribute value set when the component is active. See the WAI-ARIA 1.1 spec for a list of accepted values. 'page'
className string Class name that will be applied to the component's header. undefined
children node Content that will be rendered inside the root-level element. undefined
href string When provided, the component will be rendered as an anchor element. undefined
as React.ElementType When provided, the component will be rendered as the component or html tag indicated by this prop. Other additional props will be spread on the anchor element. For example, Link or a tags can be supplied to replace button from being the DOM element that wraps the component. undefined
... native attributes of component passed to as prop Any other props will be spread on the root element

Current Tags

  • 5.0.2                                ...           latest (a month ago)

42 Versions

  • 5.0.2                                ...           a month ago
  • 5.0.1                                ...           a month ago
  • 5.0.0                                ...           2 months ago
  • 4.0.3                                ...           2 months ago
  • 4.0.2                                ...           2 months ago
  • 4.0.1                                ...           3 months ago
  • 4.0.0                                ...           3 months ago
  • 3.2.0                                ...           3 months ago
  • 3.1.0                                ...           4 months ago
  • 3.0.10                                ...           4 months ago
  • 3.0.9                                ...           5 months ago
  • 3.0.8                                ...           5 months ago
  • 3.0.7                                ...           5 months ago
  • 3.0.6                                ...           5 months ago
  • 3.0.5                                ...           5 months ago
  • 3.0.4                                ...           6 months ago
  • 3.0.3                                ...           6 months ago
  • 3.0.2                                ...           6 months ago
  • 3.0.1                                ...           6 months ago
  • 3.0.0                                ...           7 months ago
  • 2.0.14                                ...           7 months ago
  • 2.0.13                                ...           7 months ago
  • 2.0.12                                ...           7 months ago
  • 2.0.11                                ...           8 months ago
  • 2.0.10                                ...           8 months ago
  • 2.0.9                                ...           9 months ago
  • 2.0.8                                ...           9 months ago
  • 2.0.7                                ...           9 months ago
  • 2.0.6                                ...           9 months ago
  • 2.0.5                                ...           10 months ago
  • 2.0.4                                ...           10 months ago
  • 2.0.3                                ...           10 months ago
  • 2.0.2                                ...           10 months ago
  • 2.0.1                                ...           10 months ago
  • 2.0.0                                ...           10 months ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 1
Last Month 68
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |