split-nav

July 8, 2026 · View on GitHub

When To Use

Use this pattern when you need to separate primary and secondary nav actions in one row.

HTML

<nav class="split_nav" aria-label="Documentation">
    <section class="split_nav_primary"><a href="#">Guides</a><a href="#">API</a></section>
    <section class="split_nav_secondary"><a href="#">Sign in</a></section>
</nav>

CSS

.split_nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.split_nav_primary {
    display: flex;
    gap: 0.75rem;
}

.split_nav_secondary {
    margin-inline-start: auto;
}

Core Properties

align-items, display, flex-wrap, gap, margin-inline-start define the spatial behavior for this pattern.

Properties That Break The Layout If Removed

Removing align-items, display, flex-wrap, gap, margin-inline-start changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.

Constraints And Change Points

wrap responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
Keep the HTML class hooks and CSS selectors in one-to-one agreement.

Accessibility And Source Order Notes

Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
Scroll expectation: No internal scroll container.
Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.

The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.

Composition Notes

Use split_nav as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.

Anti-patterns

Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.

Parent: In-line grouping patterns in Pattern Categories. Next: Layout Recipes for screen-level composition, or return to the Layout Pattern Catalog when choosing another primitive.