CSS Navigation Bar Generator
Build a horizontal or vertical navigation bar with your own colours, and get clean HTML and CSS with a working hover and focus state.
How to use it
- Add, rename and remove links, then pick your colours.
- Switch between horizontal and vertical layout.
- Copy the HTML and CSS separately — they are kept apart so the CSS can go in your stylesheet.
Add and rename links, pick colours, and switch between a horizontal bar — the usual layout across the top of a page — and a vertical one, suited to a sidebar menu. The output is genuine HTML and CSS, kept as two separate blocks rather than one merged snippet, specifically so the CSS can be dropped into your actual stylesheet instead of living inline on every page.
Hover and keyboard focus, not just hover
The generated CSS includes a :focus-visible state alongside :hover, and that is not a decorative extra. A visitor navigating with a keyboard tabs through links one at a time and relies entirely on some visible change — an underline, a colour shift, an outline — to know which link is currently selected before pressing Enter. A navigation bar styled only for :hover gives that visitor no feedback at all, because a mouse hover state never triggers from a keyboard.
This is a genuine, common accessibility gap in hand-written navbar CSS, and it is why the generator adds it automatically rather than leaving it as something to remember.
Questions people ask
Why does the CSS include focus-visible as well as hover?
So the bar works for keyboard users. A menu that only responds to the mouse leaves anyone tabbing through it unable to see where they are.
Is anything uploaded?
No. Everything runs in your browser — no file, image or snippet you use here ever leaves your device.
Last updated 22 August 2026