navigation pattern

he thong dieu huong: tabs, breadcrumbs, sidebar, top nav. moi loai co use case va implementation rieng.

tabs

chuyen doi giua cac view ngang hang. underline indicator cho active tab. phu hop voi sub-navigation trong dashboard hoac settings.

horizontal tabs

code

import { Tabs } from '@1thay/core';

<Tabs
  items={[
    { id: 'overview', label: 'tong quan' },
    { id: 'analytics', label: 'phan tich' },
  ]}
  activeId="overview"
  onChange={(id) => setTab(id)}
/>

breadcrumbs

chuoi link the hien vi tri trong hierarchy. separator dung chevron. link cuoi la current (khong click duoc).

breadcrumbs

code

<Breadcrumbs
  items={[
    { label: 'trang chu', href: '/' },
    { label: 'cai dat', href: '/settings' },
    { label: 'ho so' },
  ]}
/>

sidebar navigation

vertical menu ben trai. dung cho app co nhieu section. collapse duoc tren mobile.

logo

dashboard

nguoi dung

cai dat

noi dung chinh

dac diem

section groups — nhom cac link theo chuc nang
active indicator — mau brand + background nhat
icon + text — moi item co icon va label
collapse tren mobile — hamburger menu hoac drawer
sticky — sidebar co dinh khi scroll

top navigation

horizontal bar o dau trang. chua logo, primary links, search, user menu. fixed/sticky voi z-sticky.

logo dashboarddu anbao cao search...

noi dung trang

nen va khong nen

nen

dung tabs cho 2-6 view ngang hang
dung breadcrumbs cho hierarchy > 2 level
sidebar cho app co > 5 section
active state ro rang cho nav item hien tai
icon + text cho sidebar items

khong nen

dung tabs cho < 2 hoac > 8 view
breadcrumbs cho site 1 level
sidebar + top nav neu co < 3 section
an sidebar tren desktop
text-only nav items trong sidebar