Navigation
Header, sidebar, and navigation components
Navigation components provide consistent UI elements for site structure and user navigation.
Header & Footer
Located in src/components/navigation/:
import { Header } from "@/components/navigation/header";
import { Footer } from "@/components/navigation/footer";
export default function Layout({ children }) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
);
}The Header component includes:
- Logo and branding
- Main navigation menu
- User account menu (when authenticated)
- Mobile menu toggle
- Theme switcher
- Language selector
Dashboard Sidebar
For authenticated layouts with a sidebar:
import { DashboardSidebar } from "@/components/navigation/sidebar";
<DashboardSidebar items={menuItems} />Menu Items Structure
type MenuItem = {
label: string;
href: string;
icon: IconKeys;
badge?: number | string;
children?: MenuItem[];
};
const menuItems: MenuItem[] = [
{
label: t("menu.links.PageDashboard"),
href: PageDashboard(),
icon: "layoutDashboard",
},
{
label: t("menu.groups.settings"),
icon: "settings",
children: [
{
label: t("menu.links.PageSettingsProfile"),
href: PageSettingsProfile(),
icon: "user",
},
{
label: t("menu.links.PageSettingsSecurity"),
href: PageSettingsSecurity(),
icon: "shield",
},
],
},
];Breadcrumbs
Display the current page hierarchy:
import { Breadcrumbs } from "@/components/navigation/breadcrumbs";
<Breadcrumbs
items={[
{ label: "Home", href: PageHome() },
{ label: "Dashboard", href: PageDashboard() },
{ label: "Current Page" },
]}
/>Breadcrumb Items
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | Yes | Display text |
href | string | No | Link URL (omit for current page) |
PreservedTabs
Tab component that syncs with URL hash:
import { PreservedTabs } from "@/forms/preserved-tabs";
<PreservedTabs
tabs={[
{
id: "profile",
label: "Profile",
icon: "user",
component: <ProfileTab />,
},
{
id: "settings",
label: "Settings",
icon: "settings",
component: <SettingsTab />,
},
{
id: "billing",
label: "Billing",
icon: "creditCard",
badge: 3,
component: <BillingTab />,
},
]}
initialTab="profile"
/>Navigating to /page#settings automatically selects the "settings" tab.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | — | Array of tab configurations |
initialTab | string | First tab | Default tab if no URL fragment |
displayMode | "scroll" | "wrap" | "scroll" | Horizontal scroll or flex wrap |
fullWidth | boolean | false | Stretch tabs to full width |
forceMount | boolean | true | Keep all tab content mounted |
disableFragmentSync | boolean | false | Disable URL hash synchronization |
Menu Configuration
Navigation menus are centrally configured in src/routes/routing.ts:
import { createMenuGroups } from "@/routes/utils";
export const menuGroups = createMenuGroups([
{
id: "main",
links: ["PageHome", "PageAbout", "PagePricing"],
},
{
id: "dashboard",
links: ["PageDashboard", "PageDashboardApiKeys"],
requireAuth: true,
},
{
id: "admin",
links: ["PageAdminUsers", "PageAdminSettings"],
requireAuth: true,
requireRole: "admin",
},
]);Menu Group Options
| Option | Type | Description |
|---|---|---|
id | string | Group identifier |
links | string[] | Array of route names |
requireAuth | boolean | Show only when authenticated |
requireRole | string | Show only for specific role |
Menu Translations
Menu labels are defined in messages/dictionaries/{locale}/menu.json:
{
"links": {
"PageHome": "Home",
"PageAbout": "About",
"PageDashboard": "Dashboard"
},
"groups": {
"content": "Content",
"settings": "Settings",
"admin": "Administration"
}
}Best Practices
Always use route functions like PageHome() instead of hardcoded paths
Define menus in routing.ts for consistency
Icons improve scanability and recognition
Help users understand their location in deep hierarchies