Tulip Logo IconTulip
App

Navigation

Organize admin navigation with path groups, path items, permissions, and nested route segments.

Tulip sidebar navigation is route-segment aware.

Use PathGroup, Path, and PathLink to make navigation explicit and colocated with app route names.

Common pattern

<PathGroup>
  <PathGroupTitle>Operations</PathGroupTitle>
  <PathGroupItems>
    <Path segment="projects">
      <PathLink href="/admin/projects">Projects</PathLink>
    </Path>
  </PathGroupItems>
</PathGroup>

Permission-aware navigation

Use permission on groups or items when navigation should follow access control.

<PathGroup permission={[{ project: ["view"] }, { task: ["view"] }]}>
  <Path permission={{ project: ["view"] }} segment="projects">
    <PathLink href="/admin/projects">Projects</PathLink>
  </Path>
</PathGroup>

Continue reading

On this page