Top Menu
A top navigation bar component with breadcrumbs, actions, and user menu.
Installation
import { TopMenu, TopMenuUser, TopMenuUserItem, TopMenuUserSection } from "@sourceful-energy/ui"Usage
Examples
Simple Breadcrumbs
With Mobile Menu Button
With Left and Right Content
Props
TopMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| breadcrumbs | BreadcrumbItem[] | [] | Breadcrumb navigation items |
| showMobileMenu | boolean | false | Show mobile menu button |
| onMobileMenuClick | () => void | - | Mobile menu button click handler |
| leftContent | React.ReactNode | - | Left side content (appears after breadcrumbs) |
| rightContent | React.ReactNode | - | Right side content (actions, user menu, etc.) |
| linkComponent | React.ComponentType | a | Custom link component (e.g., Next.js Link) |
TopMenuUser
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | User name |
| string | - | User email | |
| avatarUrl | string | - | User avatar URL |
| avatarContent | React.ReactNode | - | Custom avatar content (icon, initials, etc.) |
| avatarClassName | string | - | Avatar background color class |
TopMenuUserItem
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | - | Item icon |
| onClick | () => void | - | Click handler |
| href | string | - | Href for link items |
| variant | "default" | "danger" | "success" | "default" | Visual variant |
Type Definitions
interface BreadcrumbItem {
label: string
href?: string
}