On this page
Proposed CSC Standards · 0.1.0
Navigation bars
A top bar for public or compact destinations.
Offer a small set of top-level destinations and the current one.
What this describes
When to use
- A public site or a simple internal header.
- Five or fewer top-level destinations.
When not to use
- A deep internal tree. Use Sidebar.
- Breadcrumb history. Use Breadcrumb.
Allowed variants
Classic
Left-aligned product links.
- Hierarchy
- Primary header.
- Use in
- Public and internal.
- Restriction
- Destinations are links.
- Accessibility
- Current item is not color-only.
- Responsive
- Wraps under 760px.
Centered
A small public set of links.
- Hierarchy
- Centered list.
- Use in
- Marketing or service pages.
- Restriction
- Do not center a long admin tree.
- Accessibility
- Same link rules.
- Responsive
- Stacks or wraps before overflow.
Compact
A short toolbar.
- Hierarchy
- Reduced padding.
- Use in
- Short labels.
- Restriction
- No clipped labels.
- Accessibility
- Targets stay at least 24 CSS pixels.
- Responsive
- Wraps with the classic bar.
Mobile
The narrow-screen header.
- Hierarchy
- Stacked or menu-like.
- Use in
- Viewports under 760px.
- Restriction
- Do not show the desktop row and the mobile row together.
- Accessibility
- The menu button has a name.
- Responsive
- This is the transformation, not a second permanent bar.
Mandatory rules
Use links for destinations
TopNav items that change the page are links, not buttons.
Implementation detail
A destination has a URL. A button is for an action.
Use links with href for each destination. Do not use a button that only assigns a URL.
Check: Each destination has an href and opens with Enter.
Wrap or collapse before the bar overflows
The mobile variant and the 760px styles wrap the bar instead of forcing sideways scroll.
Implementation detail
Proposed CSC Standard. A top nav that scrolls horizontally hides destinations.
Let the bar wrap or collapse into a menu under 760px. Do not set nowrap on the whole bar.
Check: At 320px, document scrollWidth equals the viewport width.
Identify the current item without color alone
The current destination has a text or aria-current cue.
Implementation detail
WCAG 1.4.1 Use of Color.
Give the current item aria-current or a text cue. Do not indicate it with blue text only.
Check: The current item is identifiable in grayscale.
Keep compact for short labels only
Compact reduces padding. Long labels need the classic variant.
Implementation detail
Proposed CSC Standard. Compact plus long labels overflows.
Use classic or centered when labels exceed one or two words.
Check: No label is clipped with ellipsis unless a tooltip repeats the full name. This package has no tooltip component, so do not clip.
Restrictions
No conditional or prohibited rules are published for this component.
Accessibility
- Links for navigation.
- Current item has a non-color cue.
- Menu buttons are named.
Responsive behavior
- Switch to the mobile variant or wrap by 760px.
- Do not require horizontal scrolling to reach a destination.
Component states
Default
Destinations visible.
Current
One item shows the current page.
Wrapped
Items wrap instead of overflowing.
Correct implementation
Destinations are links. The current page is marked with aria-current.
Imports: None. Dependencies: None. Rules: NAV-001.
export function PublicHeader() {
return (
<header style={{ display: 'flex', gap: 18, padding: '12px 16px', borderRadius: 12, background: '#fff' }}>
<a href="/records" aria-current="page">Records</a>
<a href="/services">Services</a>
</header>
);
}Incorrect implementation
A button that only changes the route loses link behavior such as open-in-new-tab.
Imports: None. Dependencies: None. Rules: NAV-001.
export function FakeLink() {
return <button onClick={() => { window.location.href = '/records'; }}>Records</button>;
}Common mistakes
- Buttons used for ordinary page links.
- A nowrap bar at 320px.
- Current page shown only in CSC blue.
Testing checklist
Agent prompts for this component are in the AI Development Hub.