Data display

Drawer

Inspect a project’s files in a side drawer with selectable rows, file details and sync status.

Blinc 0.6.0stable API

Drawer interaction recorded with the Blinc headless renderer

Hybrid · dark · native recording · 2×

Dark

Theme

Recorded Drawer preview while the live runtime loads

custom.css

Enable JavaScript to use the live preview.

Rust · component usage

use blinc_cn as cn;
use blinc_core::reactive::{Signal, computed};
use blinc_layout::{binding::IntoReactive, prelude::*};

pub fn drawer_demo(choice: Signal<String>) -> Div {
    use blinc_core::reactive::computed;
    let selected = choice;
    div().class("demo-stack").class("demo-stack--center").child(
        cn::button("Browse project")
            .variant(cn::ButtonVariant::Outline)
            .on_click(move |_| {
                cn::drawer_right()
                    .size(cn::DrawerSize::Wide)
                    .title("Project files")
                    .child(move || {
                        let file_icon = blinc_icons::to_svg(blinc_icons::icons::FILE, 16.0);
                        let folder_icon = blinc_icons::to_svg(blinc_icons::icons::FOLDER, 16.0);
                        let files = cn::tree_view()
                            .class("demo-project-tree")
                            .with_guides()
                            .node("src", "src", |node| {
                                node.expanded()
                                    .icon(folder_icon.clone())
                                    .child("main.rs", "main.rs", |node| node.icon(file_icon.clone()))
                                    .child("ui.rs", "ui.rs", |node| node.icon(file_icon.clone()))
                            })
                            .node("styles", "styles", |node| {
                                node.expanded()
                                    .icon(folder_icon)
                                    .child("theme.css", "theme.css", |node| node.icon(file_icon.clone()))
                            })
                            .node("Cargo.toml", "Cargo.toml", |node| node.icon(file_icon))
                            .on_select(move |key| selected.set(key.to_string()));
                        div()
                            .class("demo-drawer-content")
                            .child(
                                div()
                                    .class("demo-project-summary")
                                    .child(text("Website").class("demo-label"))
                                    .child(cn::badge("Rust project").variant(cn::BadgeVariant::Secondary)),
                            )
                            .child(files)
                            .child(cn::separator())
                            .child(
                                bound_text(computed(move |g| {
                                    let description = match g.get(selected).as_deref() {
                                        Some("main.rs") => "main.rs · Starts the application and creates its window.",
                                        Some("ui.rs") => "ui.rs · Composes reusable, reactive components.",
                                        Some("theme.css") => "theme.css · Defines the shared visual language.",
                                        Some("Cargo.toml") => "Cargo.toml · Declares the package and its dependencies.",
                                        Some("src") => "src · Application code and reusable components.",
                                        Some("styles") => "styles · Shared styles for the whole interface.",
                                        _ => "Choose a file to inspect its role in this project.",
                                    };
                                    description.to_string()
                                }))
                                .class("demo-caption"),
                            )
                    })
                    .footer(|| {
                        div()
                            .class("demo-drawer-footer")
                            .child(text("4 files").class("demo-caption"))
                            .child(cn::badge("Up to date").variant(cn::BadgeVariant::Success))
                    })
                    .show();
            })
            .build_component()
            .id("demo-action"),
    )
}

fn bound_text(value: impl IntoReactive<String>) -> Text {
    Text::bound(value.into_reactive())
}

Default component CSS

@layer components {
  .cn-drawer {
    font-family: var(--font-sans);
  }

  .cn-drawer-close:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .cn-drawer {
    background: var(--cn-drawer-bg, var(--surface-elevated));
    border: 1px solid var(--cn-drawer-border, var(--border));
  }

  .cn-drawer {
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
  }

  .cn-drawer-title {
    color: var(--text-primary);
  }

  .cn-drawer-separator {
    background: var(--border);
  }

  .cn-drawer-close {
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition:
      background-color var(--duration-fast) var(--ease-state),
      color var(--duration-fast) var(--ease-state);
  }

  .cn-drawer-close:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-primary);
  }

  .cn-drawer-header {
    border-bottom: 1px solid var(--border);
    padding: var(--space-4);
  }

  .cn-drawer-footer {
    padding: var(--space-4);
  }

  .cn-tree-row {
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    outline: 0 solid var(--focus-ring);
    outline-offset: -2px;
    transition: background var(--duration-fast) var(--ease-state),
      color var(--duration-fast) var(--ease-state);
  }

  .cn-tree-row:hover {
    background: var(--accent-subtle);
    color: var(--text-primary);
  }

  .cn-tree-row[data-selected],
  .cn-tree-row[data-selected]:hover {
    background: color-mix(in srgb, var(--primary) 24%, transparent) !important;
    color: var(--text-primary) !important;
  }

  .cn-tree-row[data-focus-visible] {
    outline-width: 2px;
  }

  .cn-tree-row[data-diff="added"] {
    color: var(--success);
  }

  .cn-tree-row[data-diff="removed"] {
    color: var(--error);
  }

  .cn-tree-row[data-diff="modified"] {
    color: var(--warning);
  }

  .cn-tree-icon {
    color: var(--text-tertiary);
  }

  .cn-tree-row[data-selected] > .cn-tree-icon {
    color: var(--primary) !important;
  }

  .cn-tree-group {
    overflow: hidden;
  }

  .cn-tree-group[data-state="closed"] {
    height: 0;
  }

  @keyframes cn-slide-from-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes cn-slide-to-right {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }

  @keyframes cn-slide-from-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes cn-slide-to-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .cn-drawer-motion-right[data-motion="enter"] {
    animation: cn-slide-from-right var(--duration-slow) var(--ease-sheet);
  }

  .cn-drawer-motion-right[data-motion="exit"] {
    animation: cn-slide-to-right var(--duration-normal) var(--ease-in) forwards;
  }

  .cn-drawer-motion-left[data-motion="enter"] {
    animation: cn-slide-from-left var(--duration-slow) var(--ease-sheet);
  }

  .cn-drawer-motion-left[data-motion="exit"] {
    animation: cn-slide-to-left var(--duration-normal) var(--ease-in) forwards;
  }
}

JavaScript is needed for Live and tab controls. Read the Rust source or read the default component CSS.

Usage and properties

The project browser reuses Tree View for expandable folders, keyboard navigation and file selection; a bound details panel follows the selected node.

Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.

Property	Type	Update model	This example
`title / child`	`string and child builder`	Construction	Project files

Keyboard and interaction

Tab stays inside the open drawer and Escape closes it. Focus returns to the trigger.

Customizing it

Add application CSS after the default component layer. These selectors are the restyling surface for this component:

.cn-drawer
.cn-drawer-header
.cn-drawer-title
.cn-drawer-close
.cn-drawer-separator
.cn-drawer-footer
.demo-project-summary
.demo-project-tree
.cn-tree-row
.cn-tree-icon
.cn-tree-group

Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.

Built-in themes

The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.

pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
    match name {
        "restrained" => blinc_theme::RestrainedTheme::bundle(),
        "expressive" => blinc_theme::ExpressiveTheme::bundle(),
        _ => blinc_theme::HybridTheme::bundle(),
    }
    .with_css(blinc_cn::cn_styles::CN_STYLES)
}

Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.

Documentation

From the canonical component guide.

A drawer is a left or right navigation panel, with the left as the default:

button("Open navigation").on_click(|_| {
    drawer_left()
        .size(DrawerSize::Medium)
        .title("Workspace")
        .child(|| div().child(text("Projects and recent activity")))
        .footer(|| div().child(muted("Signed in as Jane")))
        .show();
})

DrawerSide has Left and Right; DrawerSize has Narrow, Medium and Wide. Use a bottom sheet for a panel entering from below. .header(|| ...) replaces the title header. Each .child(|| ...) adds a body section.

When opened with the keyboard, a dialog focuses its first enabled control. Tab and Shift+Tab stay inside the topmost dialog or nested popup. Closing restores focus to the opening control if it still exists and is enabled. Pointer focus uses the same target without a keyboard outline; keyboard navigation uses the shared :focus-visible rules.

Platforms and version

The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.

Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 480 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.