Quick implementation
/* HTML: <nav class="split-nav"><a class="logo">Brand</a><ul class="nav-links">...</ul></nav> */
.split-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
background: oklch(0.19 0.02 260);
}
.nav-links {
display: flex;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: oklch(0.63 0.02 260);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.15s ease-out;
}
.nav-links a:hover {
color: oklch(0.72 0.19 265);
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a navigation component.
Goal: A horizontal navigation bar with logo on the left and links on the right — no JavaScript for layout.
Technical constraints:
- Use display: flex with justify-content: space-between on the nav container.
- Links should be an unordered list with list-style: none and flex + gap.
- Use oklch() for all colors, not hex or rgba().
- Add hover color transition on links (0.15s ease-out).
- Include focus-visible styles for keyboard navigation.
Framework variant (pick one):
A) Vanilla HTML + CSS only with semantic nav element.
B) React component — accept logo (ReactNode) and links (array of {label, href}) as props.
Edge cases to handle:
- Too many links should wrap gracefully, not overflow.
- Logo and links must stay vertically centered regardless of font size.
- Ensure keyboard focus order follows visual order (logo first, then links left-to-right).
Return HTML + CSS.Why this matters in 2026
Logo-left, links-right is the default navigation pattern across the web. justify-content: space-between makes it trivial — no floats, no absolute positioning, no clearfix. The flexbox approach is robust across all viewports and content lengths.
The logic
display: flex on the <nav> puts the logo and link list on the same row. justify-content: space-between pushes the first child to the start and the last child to the end. align-items: center keeps everything vertically centered. The link list itself is also a flex container with gap for consistent spacing.
Accessibility & performance
Use a <nav> element with aria-label to identify the navigation region. Links inside a <ul> give screen readers a count of items. :focus-visible ensures keyboard users see focus indicators without cluttering mouse interactions. This pattern uses no JavaScript and triggers no layout recalculations — it performs identically to static HTML.