Sidebar Navigation

A sidebar navigation component. The component contains the Sidebar, Mobile, MenuItem and SubmenuItem sub-components and also contains the useNavigationContext hook.

---

Usage

import { SidebarNavigation } from "@newfold/ui-component-library";

<SidebarNavigation>
    <SidebarNavigation.Sidebar className="nfd-w-[300px]">
        <SidebarNavigation.MenuItem
            id="menu-item-default-1"
            label="MenuItem 1 label"
        >
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 1 label"
                href="#sub1"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 2 label"
                href="#sub2"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 3 label"
                href="#sub3"
            />
        </SidebarNavigation.MenuItem>

        <SidebarNavigation.MenuItem
            id="menu-item-default-2"
            label="MenuItem 2 label"
        >
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 1 label"
                href="#sub1"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 2 label"
                href="#sub2"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 3 label"
                href="#sub3"
            />
        </SidebarNavigation.MenuItem>

        <SidebarNavigation.MenuItem
            id="menu-item-default-3"
            label="MenuItem 3 label"
        >
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 1 label"
                href="#sub1"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 2 label"
                href="#sub2"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 3 label"
                href="#sub3"
            />
        </SidebarNavigation.MenuItem>
    </SidebarNavigation.Sidebar>
</SidebarNavigation>

---

SidebarNavigation Props

Attribute	Type	Description	Default
children*	node |	-	-
activePath	string |	-	-

Sub-components

The SidebarNavigation has the following sub-components Sidebar, Mobile, MenuItem and SubmenuItem

---

Sidebar

The sub-component SidebarNavigation.Sidebar is a <nav> wrapper component.

<SidebarNavigation>
    <SidebarNavigation.Sidebar>
        
        /// Menu items here

    </SidebarNavigation.Sidebar>
</SidebarNavigation>

Sidebar Props

Attribute	Type	Description	Default
children*	node |	-	-
className	string |	-	-

---

Mobile

The sub-component SidebarNavigation.Mobile is a wrapper component over the MenuItem sub-components for mobile view.

<SidebarNavigation>
    <SidebarNavigation.Sidebar>
        <SidebarNavigation.Mobile>

            <SidebarNavigation.MenuItem
                id="menu-item-default-1"
                label="MenuItem 1 label"
            >
                <SidebarNavigation.SubmenuItem
                    label="SubmenuItem 1 label"
                    href="#sub1"
                />
                <SidebarNavigation.SubmenuItem
                    label="SubmenuItem 2 label"
                    href="#sub2"
                />
                <SidebarNavigation.SubmenuItem
                    label="SubmenuItem 3 label"
                    href="#sub3"
                />
            </SidebarNavigation.MenuItem>

        </SidebarNavigation.Mobile>
    </SidebarNavigation.Sidebar>
</SidebarNavigation>

Mobile Props

Attribute	Type	Description	Default
children*	node |	-	-
openButtonId	string |	-	-
closeButtonId	string |	-	-
openButtonScreenReaderText	string |	-	Open
closeButtonScreenReaderText	string |	-	Close
ariaLabel	string |	The aria label for the Modal.	-

---

MenuItem

The sub-component SidebarNavigation.MenuItem is a top-level menu item that is used to group SubmenuItem sub-components.

import { HomeIcon, FolderIcon } from "@heroicons/react/outline";

<SidebarNavigation>
    <SidebarNavigation.Sidebar className="nfd-w-[300px]">
        <SidebarNavigation.MenuItem
            id="menu-item-default-1"
            label="MenuItem 1 label"
            icon={HomeIcon}
        >
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 1 label"
                href="#sub1"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 2 label"
                href="#sub2"
            />
        </SidebarNavigation.MenuItem>
        <SidebarNavigation.MenuItem
            id="menu-item-default-2"
            label="MenuItem 2 label"
            icon={FolderIcon}
            defaultOpen={false}
        >
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 1 label"
                href="#sub1"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 2 label"
                href="#sub2"
            />
            <SidebarNavigation.SubmenuItem
                label="SubmenuItem 3 label"
                href="#sub3"
            />
        </SidebarNavigation.MenuItem>
    </SidebarNavigation.Sidebar>
</SidebarNavigation>

MenuItem Props

Attribute	Type	Description	Default
label*	string |	-	-
icon	JSX Element | React Component |	-	-
defaultOpen	bool |	-	true
children	node |	-	-

---

SubmenuItem

The SidebarNavigation.SubmenuItem renders the actual link to the desired page or destination.

<SidebarNavigation>
    <SidebarNavigation.Sidebar className="nfd-w-[300px]">
        <SidebarNavigation.MenuItem label="Settings">
            <SidebarNavigation.SubmenuItem
                label="Cache"
                href="#cache"
            />
            <SidebarNavigation.SubmenuItem
                label="CDN"
                href="#cdn"
            />
            <SidebarNavigation.SubmenuItem
                label="SEO"
                href="#seo"
            />
            <SidebarNavigation.SubmenuItem
                label="Whitelist"
                href="#whitelist"
            />
        </SidebarNavigation.MenuItem>
    </SidebarNavigation.Sidebar>
</SidebarNavigation>

SubmenuItem Props

Attribute	Type	Description	Default
label*	string |	-	-
href	string |	-	-

---

useNavigationContext

The useNavigationContext hook is used to provide the SidebarNavigation context. The context provides the following properties:

• activePath - The current active path.
• isMobileMenuOpen - A boolean indicating if the mobile menu is open.
• setMobileMenuOpen - A function to set the mobile menu open state.