Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

LIST

PreviousDivider
LoadingNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

Example: settings panel + sidebar navigation

Settings

Wi-Fi

Connected

Bluetooth

Off

Notifications

Priority only

Home
Profile
Orders
Favorites
  • Displaying navigation menus, settings panels, or contact lists
  • Organizing items with titles, subtitles, icons, and actions
  • Building sidebar navigation with nested groups
  • Showing selectable collections (single or multi-select)

Usage Guidelines

DO

Use nav variant for navigation drawers with reduced width and rounded corners. Group related items with ListSubheader. Keep list items scannable with concise text

Don’t

Don't mix too many action types in a single list. Don't use lists for tabular data — use tables instead. Don't deeply nest more than two levels

Accessibility

  • Uses role="list" and role="listitem" semantics by default
  • Keyboard: ArrowUp/ArrowDown to navigate items, Enter/Space to select or activate
  • Tab moves focus into and out of the list; arrow keys handle internal navigation
  • Active/selected state communicated via aria-selected and aria-current