Navigation — Malkai design system

Overview

Navigation keeps the current place visible and the primary destinations predictable. Desktop uses a persistent full-height sidebar beside the working canvas. Mobile uses a bottom tab bar. They are responsive forms of the same navigation source, shown separately because they never occupy one viewport.

Desktop sidebar

Desktop frame · full-height sidebar

Workspace

Primary

Workspace

Fourth section
Future section soon

Dark theme

A. SaidReservation

Usage

Provide one primary navigation systemEvery internal workspace page uses the same destination set and current-location model; individual pages do not introduce competing primary navigation.
Use Sidebar on desktopThe persistent rail keeps brand, destinations, current location, and account context on the fixed page edge while the content canvas scrolls independently.
Use Tab bar on mobileFour primary destinations remain one tap away and the fifth Menu item opens the remaining destinations without covering the bar used to close it.

Mobile tab bar

On the compact shell the sidebar is replaced, not compressed. The bottom bar keeps four primary destinations at the thumb edge and leaves the page canvas unobstructed above it. A fifth Menu tab is closed by default, so its icon is the registry menu mark rather than a close mark.

Primary destinations stay visibleUse short place names and one registry icon per destination.
Menu holds the remainderOpening it brings a full-width, near-full-height navigation layer in from the right; only then may its icon change to close.
The bar owns the bottom edgeThe navigation layer stops at the bar, so the Menu tab remains in the same place for dismissal. A separate Bottom sheet follows its own modal contract.

Anatomy

Desktop sidebar

1Brand. The workspace identity anchors the persistent edge and returns to its home.
2Group heading. Names the destination list below without introducing another navigation level.
3Navigation entry. A 44px destination row. The current page carries both wash and accent bar through aria-current.
4Account tail. Identity and account access remain pinned to the bottom after navigation.

Mobile tab bar

1Tab container. One equal-width 68px target combines a registry icon and a short place name.
2Current tab. The icon fills and both icon and label take the accent; aria-current exposes the same state.
3Menu tab. The fifth target remains fixed at the right edge. At rest it shows the Menu icon and aria-expanded="false"; the open navigation layer swaps the same control to a close mark.

Desktop navigation item states

State	Specimen	What changes
Rest	Navigation item	Muted text keeps an available destination quieter than the current page.
Current	Navigation item	Accent bar and wash answer the current place together.
Hover	Navigation item	A quiet wash previews the pointer target without borrowing the current-page bar.
Keyboard focus	Navigation item	The standard inset camel outline marks the complete 44px target.
Disabled	Navigation item	Quiet ink removes invitation; no hover wash or destination is exposed.

Mobile tab states

State	Specimen	What changes
Rest		Icon and short label remain muted until the destination is current.
Current	Tab	The icon fills and both icon and label take the accent; `aria-current` carries the state.
Disabled		Quiet ink removes invitation. Touch tabs have no hover state.
Menu open	Fifth section Sixth section Seventh section First Second Third Fourth	The navigation layer enters from the right, leaves a small reveal at the top, and meets the bar without a gap. The same Menu tab stays visible, exposes `aria-expanded="true"`, and becomes the close control.

Do and don't

Do

Keep primary destinations and the current place persistent on one full-height edge.

Current section
Second section

Don't

Do not rely on text colour alone or crop the sidebar into a floating mini-menu.

Mobile tab bar

Do

Default to four primary destinations plus Menu and give every tab a short, concrete label of one or two words.

Don't

Do not crowd the bar with a fifth primary destination or let labels wrap. Move lower-priority destinations into Menu.

Copy

Entries name placesUse short nouns from the product information architecture, not action phrases.
One or two words on mobileTab labels remain readable without wrapping or abbreviating into internal jargon.
Menu stays MenuThe label does not change to “Close”; the icon and expanded state carry the temporary change.

Responsive

Desktop keeps the sidebarThe full-height rail sits beside the flexible content canvas and scrolls independently when its destinations exceed the viewport.
Mobile replaces it with the tab barThe desktop sidebar does not squeeze or become a top bar.
One navigation sourceThe mobile bar and Menu surface are derived from the same destinations as the desktop sidebar.

Accessibility

Name the landmarkOne primary nav landmark exposes the destination set.
Expose the current pagearia-current="page" carries the state; visual accent only draws it.
Expose Menu stateThe Menu tab uses aria-expanded and aria-controls to reference the navigation layer it opens.
Keep 68px mobile targetsEach tab remains thumb-sized across the available width.

Markup

<nav class="mk-nav" aria-label="Primary">
  <div class="mk-nav-inner">…brand, grouped links, account…</div>
</nav>

<nav class="mk-tabbar" aria-label="Primary">
  <a class="mk-tab" href="…" aria-current="page">…icon and label…</a>
  …three more primary destinations…
  <button class="mk-tab" type="button" aria-expanded="false"
          aria-controls="mobile-navigation">…Menu…</button>
</nav>

<nav class="mk-mobile-nav" id="mobile-navigation"
     aria-label="All destinations" hidden>
  <div class="mk-mobile-nav-inner">…remaining destination groups…</div>
</nav>