bash-ui
ComponentsDesign systemsHow to use
Getting started
IntroductionHow to use
Design systemsSee all →
The MeridianFrontierUnderstatedCuratedStudioNeutralPlayground
ButtonsSee all →
Social link buttonsKey login buttonSend buttonArrow buttonVideo buttonApp store badgeTonal buttonLoading buttonCTA buttonInbox buttonDelete button
Top navbars & navigationSee all →
Radial navigationExpanding menuGooey tabsCount tabsApp sidebar
InputsSee all →
Sort-by headingDissolve inputSearchable selectCheckboxLock toggleNotification toggleGooey inputSearch barRange sliderDate range calendar
ChartsSee all →
GitHub activity chartRevenue bar chartDonut chartMoney flow chartIncome vs spending chartFunnel chartMetric cardPipeline chartBreakdown dialAI cost cardStick progress bar
Data displaySee all →
Tech stack logosWallet cardScore gauge
Images & mediaSee all →
Doodle portraitImage collageQR codeSaved board
Text & typeSee all →
Scramble text
ListsSee all →
Ranking tableTo-do listFAQ accordionSwipe cards
FeedbackSee all →
Feedback cardFeedback sheet
Menus & overlaysSee all →
Link previewInfo tooltipAccount menu

Top navbars & navigation

Tab rows that sit at the top of a page, and the sidebar that holds the whole app together.

Radial navigation
Expanding menu
Gooey tabs
Count tabs
App sidebar

Playground

Component
Design system
Label
Anchored edge
Footer
import { ExpandingMenu } from "@/components/expanding-menu";

<ExpandingMenu
  label="Menu"
  align="left"
  footer="Sign out"
  items={items}
/>
180Connect
  • Dashboard
  • Tasks3
  • Inbox12
  • Clients
  • Data imports
  • Analytics