Side Nav

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/side-nav
`

$3

`shell
yarn add @leafygreen-ui/side-nav
`

$3

`shell
npm install @leafygreen-ui/side-nav
`

Peer Dependencies

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

Example

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

return (
widthOverride={300}
className={css
height: 100vh; // sets height of SideNav
}
>
Overview
Introduction

Android SDK
Install MongoDB Community Edition
header="Fundamentals"
collapsible
glyph={}
>

Upgrade MongoDB Community to MongoDB Enterprise

Verify Integrity of MongoDB Packages

Privacy
Security




);
`

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 |
| baseFontSize | 14, 16 | Determines the base font size (in pixels) of the Side Nav | 14 |
| widthOverride | number | Width (in pixels) of Side Navigation. | 184 |
| collapsed | boolean | Allows consuming applications to control the collapsed state of the navigation. | |
| setCollapsed | React.Dispatch> | Consuming application's collapsed-state management controller | () => {} |

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

SideNavGroup

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 |
| hasActiveItem | boolean | Manually overrides automatic detection of whether a group contains an active item. | |
| glyph | React.ReactNode | Sets an optional glyph to be rendered with the group header. Note: This prop expects either a LeafyGreen Icon component, or a component created with the createIconComponent() function from the @leafygreen-ui/icon package, and may not render other React nodes passed to it. | |

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

SideNavItem

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 |
| onClick | function | The event handler function for the 'onclick' event. Receives the associated event object as the first argument. | |
| 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 |
| indentLevel | Number | Changes the indentation. Will not work if is a child of . | 1 |
| ... | native attributes of component passed to as prop | Any other props will be spread on the root element | |

CollapsedSideNavItem

Displays the passed React node within the collapsed state of the navigation.

Properties

| Prop | Type | Description | Default |
| ----------- | --------- | ------------------------------------------------------------------- | ------- |
| active | boolean | Whether or not the component should be rendered in an active state. | false |
| className | string | Class name that will be applied to the component's header. | |
| children | node` | Content that will be rendered inside the collapsed navigation. | |