@instructure/ui-side-nav-bar

---

category: packages

ui-side-nav-bar

Main and application level navigational components.

Components

The ui-side-nav-bar package contains the following:

• SideNavBar
• AppNav

Installation

npm install @instructure/ui-side-nav-bar

Usage

import React from 'react'
import { SideNavBar } from '@instructure/ui-side-nav-bar'
import { Avatar } from '@instructure/ui-avatar'

const MySideNavBar = () => {
  return (
    <SideNavBar label="My SideNavBar">
      <SideNavBar.Item
        icon={<Avatar name="Joel Andrews" size="x-small" />}
        label="My Account"
        href="http://example.com"
      />
    </SideNavBar>
  )
}

For detailed usage and documentation, see individual component examples.