skills.rest
serverpod
serverpodOFFICIAL
Explore all skills by this author →
Website𝕏@ServerpodDevGitHub

shadcn_ui-breadcrumb

Generate Flutter breadcrumb navigation code using shadcn_ui widgets.

8|Updated Mar 7, 2026
Search Tags:#navigation#ui components#flutter#breadcrumb#shadcn_ui
One-click install
npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-breadcrumb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn_ui-breadcrumb
Source: https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-breadcrumb
Command: npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-breadcrumb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you implement clear and intuitive breadcrumb navigation in your Flutter applications using the shadcn_ui package, guiding users through hierarchical content.

Core Features & Use Cases

  • Hierarchical Navigation: Display the current location within a site's or app's structure.
  • Customizable Separators: Easily change the visual separator between breadcrumb items.
  • Dropdown Integration: Include dropdown menus within breadcrumbs for quick access to related sections.
  • Use Case: In a documentation site, use breadcrumbs to show the path from the main topic to the current sub-section, with a dropdown to quickly jump to other related documentation categories.

Quick Start

Create a basic breadcrumb navigation with a home link, a dropdown for sections, and the current page title.

Frequently Asked Questions about shadcn_ui-breadcrumb

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement breadcrumb navigation in Flutter using shadcn_ui?▼

To implement breadcrumb navigation in Flutter using shadcn_ui, this Skill generates code using ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, and ShadBreadcrumbEllipsis widgets to render hierarchical link structures.

Can I add a dropdown menu inside a breadcrumb trail for quick navigation?▼

Yes, you can include dropdown menus within breadcrumbs for quick access to related sections. The Skill generates code utilizing the ShadBreadcrumbDropdown widget to integrate this enhanced user navigation functionality into your application.

How do I customize the separators between breadcrumb items in Flutter?▼

You can easily change the visual separator between breadcrumb items in Flutter. This Skill generates code for breadcrumb navigation components using the shadcn_ui package that supports customizable separators between hierarchical links.

When should I use breadcrumbs in my Flutter app interface?▼

Use breadcrumbs in your Flutter app to display the current location within a site's or app's structure. They are particularly useful in interfaces like documentation sites to show the path from a main topic to the current sub-section.

Does the shadcn_ui breadcrumb support ellipsis for long navigation paths?▼

Yes, the shadcn_ui breadcrumb supports ellipsis for handling long navigation paths. The Skill generates code utilizing the ShadBreadcrumbEllipsis widget specifically for rendering collapsed or truncated breadcrumb items.

Related Skills

Explore More Design & Creative Skills→
serverpodserverpod
8

shadcn_ui-badge

Render primary, secondary, destructive, and outline badges in Flutter with shadcn_ui.

Official
Basic
kshehadehkshehadeh

breadcrumb-routes

Synchronize breadcrumb navigation components with new Next.js page routes.

Community
Intermediate
PaldomPaldom
1

using-streamlit-layouts

Structure Streamlit application layouts with sidebars, columns, containers, tabs, and expanders.

Community
Intermediate
IAFahimIAFahim

app-ui-navigation

Automate Unity UI navigation setup with NavGraph, NavHost, and NavController.

Community
Advanced