Basic Hierarchy

File Tree Example

HTML Structure

Uses semantic HTML with nested `<details>` and `<summary>` elements:

<ul class="tree">
				<li>
				<details>
				<summary>Parent Item</summary>
				<ul>
				<li><a href="#">Child Item</a></li>
				<li>
				<details>
				<summary>Nested Parent</summary>
				<ul>
				<li><a href="#">Nested Child</a></li>
				</ul>
				</details>
				</li>
				</ul>
				</details>
				</li>
				</ul>

Accessibility

The hierarchy component uses native `<details>` and `<summary>` elements, providing:

  • Native keyboard navigation (Enter/Space to expand/collapse)
  • Screen reader support out of the box
  • No JavaScript required for basic functionality
  • Enhanced keyboard support with arrow keys available via window.Axiom.initHierarchyAccessibility()

JavaScript Enhancement

Enable arrow-key navigation for improved keyboard accessibility:

// Initialize arrow-key navigation
				const hierarchyContainer = document.querySelector('.tree');
				window.Axiom.initHierarchyAccessibility(hierarchyContainer);

				// Keyboard controls:
				// - Arrow Down: Focus next item
				// - Arrow Up: Focus previous item
				// - Arrow Right: Expand current details
				// - Arrow Left: Collapse current details

Design Tokens Used

  • --a-space-l - Indentation per level
  • --a-space-m - Vertical padding between items
  • --a-space-s - Gap between toggle and text
  • --a-color-outline - Tree lines color
  • --a-color-primary - Hover state color
  • --a-font-weight-medium - Summary text weight
  • --a-transition-base - Smooth toggle animation

CSS Classes

  • .tree - Root container for tree list
  • Uses native `
    ` and `` elements (no additional classes needed)
  • Semantic `

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Hierarchy component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.