Skip to main content

Components

Sidebar

Sidebars are a form of navigation. They provide access to primary content

banner-Sidebar
Square Icon

Selected Theme

Select brand or tribe name to preview style

Default

Usage

A spinner component to display a loading state of a page or section.

import { SidebarNavLink } from 'legion-ui';

Variant

Legion have 2 variant of sidebar

Basic

    <Navbar variant="fixed" mode="dark" isBordered>
        <NavbarBrand>
            <Heading size="h3" color="primary500">
            Legion
            </Heading>
            <NavbarToggle onClick={() => setActiveToggle(!activeToggle)} />
        </NavbarBrand>
    </Navbar>
     <SidebarNavLink listItems={[

With Sub Menu

    <Navbar variant="fixed" mode="dark">
        <NavbarBrand style={{display: 'flex', alignItem: 'center'}}>
            <Heading size="h3" color="primary500">
            Legion
            </Heading>
            <NavbarToggle onClick={() => setActiveToggle(!activeToggle)} />
        </NavbarBrand>
    </Navbar>
     <SidebarNavLink listItems={[

Props

Sidebar NavLink

propertypropTyperequireddefaultdescription
childrenReact.ReactNode --Pass all the necessary components here as a header slot
listItemsArray of Objectyes-Pass all the menu list as array of object with the following listItems[key]:

List Item

propertypropTyperequireddefaultdescription
routestring--Sets menu icon
iconIconName from react-feather--Sets menu link
titlestringyes-Sets menu title
isParentboolean--Sets menu as parent menu
submenuItemsArray of Object--Sets submenu items when isParent is true, fill submenuItems with Array of Object contains icon, route, and title.