Propel

List

A vertical roving-focus list of navigation and action rows, the primitive sidebars compose.

Basic

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { List, ListItem, ListItemButton, ListItemLink } from "@makeplane/propel/components/list";
import { Ellipsis, Inbox, LayoutGrid, Settings } from "lucide-react";

export default function BasicDemo() {
  return (
    <List role="toolbar" aria-label="Workspace">
      <ListItem>
        <ListItemLink href="#inbox" icon={<Icon icon={Inbox} magnitude="md" />} label="Inbox" />
      </ListItem>
      <ListItem>
        <ListItemLink
          href="#projects"
          aria-current="page"
          icon={<Icon icon={LayoutGrid} magnitude="md" />}
          label="Projects"
        />
      </ListItem>
      <ListItem>
        <ListItemLink
          href="#settings"
          icon={<Icon icon={Settings} magnitude="md" />}
          label="Settings"
        />
      </ListItem>
      <ListItem>
        <ListItemButton icon={<Icon icon={Ellipsis} magnitude="md" />} label="More" />
      </ListItem>
    </List>
  );
}

Section

Wrap a List in ListSection to get a muted heading that collapses its body. The disclosure chevron rotates as the section opens and closes.

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { List, ListItem, ListItemLink, ListSection } from "@makeplane/propel/components/list";
import { LayoutGrid, Settings } from "lucide-react";

export default function SectionDemo() {
  return (
    <ListSection label="Workspace" indicator defaultOpen>
      <List role="toolbar" aria-label="Workspace">
        <ListItem>
          <ListItemLink
            href="#projects"
            aria-current="page"
            icon={<Icon icon={LayoutGrid} magnitude="md" />}
            label="Projects"
          />
        </ListItem>
        <ListItem>
          <ListItemLink
            href="#settings"
            icon={<Icon icon={Settings} magnitude="md" />}
            label="Settings"
          />
        </ListItem>
      </List>
    </ListSection>
  );
}

Section heading

For settings-style sidebars whose groups never collapse, ListSectionHeading titles a List with a static, non-interactive label.

Members
Show code
import { Icon } from "@makeplane/propel/components/icon";
import {
  List,
  ListItem,
  ListItemLink,
  ListSectionHeading,
} from "@makeplane/propel/components/list";
import { Bell, User, Users } from "lucide-react";

export default function SectionHeadingDemo() {
  return (
    <div className="flex flex-col gap-1">
      <ListSectionHeading>Members</ListSectionHeading>
      <List role="toolbar" aria-label="Members">
        <ListItem>
          <ListItemLink
            href="#profile"
            aria-current="page"
            icon={<Icon icon={User} magnitude="md" />}
            label="Profile"
          />
        </ListItem>
        <ListItem>
          <ListItemLink href="#teams" icon={<Icon icon={Users} magnitude="md" />} label="Teams" />
        </ListItem>
        <ListItem>
          <ListItemLink
            href="#notifications"
            icon={<Icon icon={Bell} magnitude="md" />}
            label="Notifications"
          />
        </ListItem>
      </List>
    </div>
  );
}

Controlled

Drive a section’s open state yourself with open and onOpenChange.

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { List, ListItem, ListItemLink, ListSection } from "@makeplane/propel/components/list";
import { LayoutGrid, Settings } from "lucide-react";
import * as React from "react";

export default function ControlledDemo() {
  const [open, setOpen] = React.useState(true);
  return (
    <ListSection label="Workspace" indicator open={open} onOpenChange={(next) => setOpen(next)}>
      <List role="toolbar" aria-label="Workspace">
        <ListItem>
          <ListItemLink
            href="#projects"
            aria-current="page"
            icon={<Icon icon={LayoutGrid} magnitude="md" />}
            label="Projects"
          />
        </ListItem>
        <ListItem>
          <ListItemLink
            href="#settings"
            icon={<Icon icon={Settings} magnitude="md" />}
            label="Settings"
          />
        </ListItem>
      </List>
    </ListSection>
  );
}

Installation

import { List, ListItem, ListItemButton, ListItemLink } from "@makeplane/propel/components/list";

Props

List

PropTypeRequiredDescription

ListItemLink

PropTypeRequiredDescription
iconReactNodeNoElement rendered before the label, usually `<Icon icon={...} />`.

ListItemButton

PropTypeRequiredDescription
iconReactNodeNoElement rendered before the label, usually `<Icon icon={...} />`.