Navbar

The Navbar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

Usage

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

const schema = {
  "data": {
    "items": [
      {
        "appIcon": "<cdn_url>",
        "title": "Itsy UI Components"
      }
    ],
    "rightItems": [
      {
        "id": "profile",
        "title": "Profile",
        "friendlyURL": "/profile"
      },
      {
        "id": "help",
        "title": "Help",
        "friendlyURL": "/help"
      },
      {
        "id": "logout",
        "title": "Logout",
        "friendlyURL": "/signout"
      }
    ]
  }
}

<ItsyNavbar className="Navbar" 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 navbar left and right positions. Object contains following properties,
  • items - Items to be displayed in navbar left panel
  • rightItems - Items to be displayed in navbar right panel


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