Docs
Inner Side Menu

Inner Side Menu

InnerSideMenu is a component that provides a collapsible side menu with multiple sections.

import React from 'react'
import { Card } from 'ui'
import {
  InnerSideMenuCollapsible,
  InnerSideMenuCollapsibleTrigger,
  InnerSideMenuCollapsibleContent,
  InnerSideMenuItem,
  InnerSideMenuSeparator,
} from 'ui-patterns/InnerSideMenu'
 
export function InnerSideMenuDemo() {
  return (
    <Card className="min-w-60 bg-dash-sidebar py-4 flex flex-col gap-6 h-full">
      <InnerSideMenuCollapsible defaultOpen>
        <InnerSideMenuCollapsibleTrigger title="Projects">Hello</InnerSideMenuCollapsibleTrigger>
        <InnerSideMenuCollapsibleContent className="mt-2">
          <InnerSideMenuItem href="/">Dashboard</InnerSideMenuItem>
          <InnerSideMenuItem href="/">Team</InnerSideMenuItem>
          <InnerSideMenuItem href="/">Settings</InnerSideMenuItem>
        </InnerSideMenuCollapsibleContent>
      </InnerSideMenuCollapsible>
      <InnerSideMenuSeparator />
      <InnerSideMenuCollapsible defaultOpen>
        <InnerSideMenuCollapsibleTrigger title="Projects">Hello</InnerSideMenuCollapsibleTrigger>
        <InnerSideMenuCollapsibleContent className="mt-2">
          <InnerSideMenuItem href="/" title="Dashboard">
            Dashboard
          </InnerSideMenuItem>
          <InnerSideMenuItem href="/">Team</InnerSideMenuItem>
          <InnerSideMenuItem href="/">Settings</InnerSideMenuItem>
        </InnerSideMenuCollapsibleContent>
      </InnerSideMenuCollapsible>
      <InnerSideMenuCollapsible defaultOpen>
        <InnerSideMenuCollapsibleTrigger title="Projects">Hello</InnerSideMenuCollapsibleTrigger>
        <InnerSideMenuCollapsibleContent className="mt-2">
          <InnerSideMenuItem href="/" title="Dashboard">
            Dashboard
          </InnerSideMenuItem>
          <InnerSideMenuItem href="/">Team</InnerSideMenuItem>
          <InnerSideMenuItem href="/">Settings</InnerSideMenuItem>
        </InnerSideMenuCollapsibleContent>
      </InnerSideMenuCollapsible>
    </Card>
  )
}

Examples

Collapsible menus

Inner Side Menu uses the <InnerSideMenuCollapsible /> component to wrap the menu items. This is a wrapper component around the <Collapsible /> component.

import {
  InnerSideMenuCollapsible,
  InnerSideMenuCollapsibleTrigger,
  InnerSideMenuCollapsibleContent,
  InnerSideMenuItem,
} from 'ui-patterns/InnerSideMenu'
 
function app() {
  return (
    <InnerSideMenuCollapsible key={category} defaultOpen>
      <InnerSideMenuCollapsibleTrigger title={category} />
      <InnerSideMenuCollapsibleContent>
        <InnerSideMenuItem href="/dashboard">Dashboard</InnerSideMenuItem>
        <InnerSideMenuItem href="/team">Team</InnerSideMenuItem>
        <InnerSideMenuItem href="/settings">Settings</InnerSideMenuItem>
      </InnerSideMenuCollapsibleContent>
    </InnerSideMenuCollapsible>
  )
}

Static titles

If you don't need the Collapsible features, you can instead use <InnerSideBarTitle />. This doesn't require the use of the <InnerSideMenuCollapsible /> parent component wrapped around it.

You can wrap the <InnerSideBarItem /> conponents however you like. Below we've put a <div/ > around them.

<InnerSideBarTitle>Projects</InnerSideBarTitle>
<div className="mt-2">
    <InnerSideMenuItem href="/dashboard">Dashboard</InnerSideMenuItem>
    <InnerSideMenuItem href="/team">Team</InnerSideMenuItem>
    <InnerSideMenuItem href="/settings">Settings</InnerSideMenuItem>
</div>
ProjectsDashboardTeamSettings
ProjectsDashboardTeamSettings
ProjectsDashboardTeamSettings

Loading state

Use <InnerSideMenuItemLoading /> to show a loading state for menu items.

This item is a wrapper around the <Skeleton /> component, and also includes some y-padding so the items don't layout shift when shifting to loaded state and to look visually separated in a list.

With search

Use the following components to add a search input to the menu.

<InnerSideBarFilters>
  <InnerSideBarFilterSearchInput
    name="search-input"
    placeholder="Search..."
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    aria-labelledby="Search items"
  />
</InnerSideBarFilters>

There is also a Filter Dropdown component that can be used to sort the menu items. This can be used inside <InnerSideBarFilterSearchInput />.

<InnerSideBarFilters>
  <InnerSideBarFilterSearchInput
    name="search-input"
    placeholder="Search..."
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    aria-labelledby="Search items"
  >
    <InnerSideBarFilterSortDropdown value={sort} onValueChange={(value) => setSort(value)}>
      <InnerSideBarFilterSortDropdownItem value="alphabetical">
        Sort Alphabetically
      </InnerSideBarFilterSortDropdownItem>
      <InnerSideBarFilterSortDropdownItem value="reverse">
        Sort Reverse Alphabetically
      </InnerSideBarFilterSortDropdownItem>
    </InnerSideBarFilterSortDropdown>
  </InnerSideBarFilterSearchInput>
</InnerSideBarFilters>

Empty list state

Use <InnerSideMenuEmptyState /> to show an empty state.

Use the actions prop to add any actions like a <Button />.

<InnerSideBarEmptyPanel
  title="No functions found"
  description="Create your first serverless function to get started."
  actions={
    <Button type="default" onClick={createAction}>
      Create Function
    </Button>
  }
/>

You can also use the prop illustration to pass in a custom illustration, it accets any React Node.

<InnerSideBarEmptyPanel
  title="No functions found"
  description="Create your first serverless function to get started."
  illustration={
    <figure>
      <svg>../</svg>
    </figure>
  }
/>
🚀

No functions found

Create your first serverless function to get started.

No functions found

Create your first serverless function to get started.

PreviousInfo Tooltip
NextForm Item Layout