Higher-Level Pattern

Tree Navigation

A hierarchical tree view built on core disclosure primitives with custom CSS for indentation, tree lines, and file/folder icons.

i Core doesn't include a Tree component. This mockup shows how to construct one from nested <details> elements with custom CSS layered on top.
File System
A project directory tree with expandable folders and file icons.
my-project
src
components
Button.tsx
Header.tsx
Sidebar.tsx
styles
globals.css
tokens.css
index.ts
app.ts
package.json
tsconfig.json
README.md
Category Navigation
A settings or documentation sidebar with expandable categories.
Account
Profile
Security
Billing
Preferences
Appearance
Language
Accessibility
Integrations
APIs
REST
GraphQL
Webhooks
OAuth Apps
CI/CD
i Keyboard navigation: Tab to move between summaries, Enter or Space to toggle. Arrow-key navigation within the tree would require additional JavaScript.