leptos-column-browser

Finder-style column navigation for Leptos with async loading, keyboard support, resizable columns, and CSS-variable theming.

Overview

leptos-column-browser renders a multi-pane Miller-column navigator for any deeply-nested hierarchy you can represent as a tree. You implement one async trait — TopologyProvider — and the component handles rendering, keyboard navigation, ARIA, and column management.

Features

Domain-agnostic — TopologyProvider is your contract; no opinion on node types
Async-first — children fetched lazily on drill-down via async fn get_children
Keyboard accessible — ↑/↓ within columns, → to drill, ← to pop back
ARIA compliant — role="tree", role="treeitem", aria-selected, aria-expanded
Resizable columns — drag the right edge; min/default widths configurable
Custom icons — IconRenderer closure; no built-in icon opinions
Controlled state — supply RwSignal<DrillPath> for URL routing or leave internal
CSS-variable theming — override --lcb-* variables; zero style injection

Installation

[dependencies]
leptos-column-browser = "0.1"

Link the stylesheet in index.html:

<link rel="stylesheet" href="path/to/column-browser.css" />

Requires wasm32-unknown-unknown and trunk:

rustup target add wasm32-unknown-unknown
cargo install trunk

Quick Start

use leptos::prelude::*;
use leptos_column_browser::{ColumnBrowser, Node, NodeId, StaticTopologyProvider};

#[component]
pub fn App() -> impl IntoView {
    let tree = vec![
        Node::container(NodeId::root("docs"), "Documents".into(), "folder")
            .with_child(Node::leaf(
                NodeId::from_segments(["docs", "readme.md"]),
                "readme.md".into(),
                "file",
            )),
    ];
    view! {
        <ColumnBrowser
            provider=StaticTopologyProvider { nodes: tree }
            root_id=NodeId::root("__root__")
            on_open=Callback::new(|id| log::info!("opened {id}"))
        />
    }
}

For async providers (HTTP, database) see docs/provider.md.

Examples

See EXAMPLES.md for full walkthroughs.

Example	What it shows
`file_explorer`	Static in-memory tree with `StaticTopologyProvider`
`api_navigator`	Async provider pattern with lazy child loading

Feature Flags

Flag	Default	Description
`ui`	✅	Enables Leptos UI components and web bindings

MSRV

Rust 1.94 (edition 2024). Requires wasm32-unknown-unknown for browser use.

Contributing

See CONTRIBUTING.md.

License

MIT OR Apache-2.0

leptos-column-browser 0.1.1