Sidebar

Sidebar is a navigation widget that renders in the left or right area of the application. It allows for navigation to other pages of the application.


Usage

import { ItsySidebar } from '@itsy-ui/navigation';

const schema = {
  "data": {
    "default": [
      {
        "id": "inbox",
        "title": "Inbox",
        "url": "/inbox",
        "orderId": 1
      },
      {
        "id": "starred",
        "title": "Starred",
        "url": "/starred",
        "orderId": 2
      },
      {
        "id": "sent",
        "title": "Sent Email",
        "url": "/sent",
        "orderId": 3
      },
      {
        "id": "draft",
        "title": "Drafts",
        "url": "/drafts",
        "orderId": 4
      },
      {
        "id": "all",
        "title": "All Mail",
        "url": "/all",
        "orderId": 5
      },
      {
        "id": "trash",
        "title": "Trash",
        "url": "/trash",
        "orderId": 6
      }
    ]
  }
}

<ItsySidebar className="sidebar" schema={schema} />


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
schema Object {} Schema which contains information to be displayed inside drawer.


Schema API’s

name type default description
data object Elements to be displayed in sidebar. Each elements will contains following attributes,
  • id - Key value of the sidebar entry
  • title - Text to be displayed in sidebar
  • icon - Icon to be displayed along with text
  • url - Url to be navigated on click of sidebar
  • orderId - Order of the element in sidebar entries


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions