Skip to content

breadcrumbs.md

Latest commit

 

History

History
68 lines (58 loc) · 1.64 KB

breadcrumbs.md

File metadata and controls

68 lines (58 loc) · 1.64 KB

Breadcrumbs

Overview

  • A horizontal breadcrumb navigation widget for showing the user's current location in a hierarchy and enabling quick navigation. Use TBreadcrumbs to display a trail of pages or sections with optional icons and customizable separators.

Features

  • Render a flexible list of breadcrumb items (label and/or icon).
  • Configurable maximum visible items with ellipsis when overflowed.
  • Custom separator widget and direction (left-to-right or right-to-left).
  • Clickable items via TBreadcrumbItem.onTap.

📦 Import

import 'package:flutter_bamboo_ui_kit/core.dart';

Usage Example

TBreadcrumbs(
  items: [
    TBreadcrumbItem(
      onTap: () {},
      icon: SvgPicture.asset(Assets.svg.home),
    ),
    TBreadcrumbItem(
      onTap: () {},
      label: 'Navigation',
    ),
    TBreadcrumbItem(
      onTap: () {},
      label: 'Breadcrumbs',
    ),
  ],
)

UI Preview

Breadcrumbs Preview

Variant

Limit visible

TBreadcrumbs(
  maxVisibleItems: 4,
  items: [
    TBreadcrumbItem(onTap: () {}, icon: SvgPicture.asset(Assets.svg.home)),
    TBreadcrumbItem(onTap: () {}, label: 'Breadcrumb'),
    TBreadcrumbItem(onTap: () {}, label: 'Breadcrumb'),
    TBreadcrumbItem(onTap: () {}, label: 'Breadcrumb'),
    TBreadcrumbItem(onTap: () {}, label: 'Breadcrumb'),
  ],
)

Direction

TBreadcrumbs(
  direction: BreadcrumbDirection.right,
  items: [
    TBreadcrumbItem(onTap: () {}, icon: SvgPicture.asset(Assets.svg.home)),
    TBreadcrumbItem(onTap: () {}, label: 'Section'),
    TBreadcrumbItem(onTap: () {}, label: 'Current Page'),
  ],
)