Components
Navigation
How people move: the sidebar (this site's own), a top bar with a page switcher, breadcrumbs back up the tree, and pagination through long lists.
Sidebar
The one on the left of this page. Collapse it with its button: labels fade, icons centre, the page widens — and it stays the way you leave it. On phones it is a drawer.
Top bar
Logo or menu button, the page switcher, then search, notifications and the person. The bell is live: open it, mark all read, or open one.
Octagon OS
Page: overview · notifications unread
Breadcrumbs
Pagination
Shows where you are and up to five page numbers.
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
Sidebar groups | { title?, items: { href, label, icon, count? }[] }[] | — | Sections and links |
Sidebar current / collapsed / open | path · bindable · bindable | — | Active link · icon-only mode · phone drawer |
Sidebar brand / footer | snippet({ collapsed }) | — | Logo at the top, person or settings at the bottom |
TopBar leading / centre / trailing | snippet | — | Three areas; centre moves below on phones |
NotificationBell items / read | { id, title, detail?, tone?, onopen? }[] · bindable | — | The list and whether it was seen |
Breadcrumbs items | { label, href? }[] | — | The last item is the current page |
Pagination page / total / perPage | bindable · number · number | 1 · · 10 | Where you are and how many there are |