CSS Menu Generator
Create a styled navigation menu with CSS — horizontal or vertical, custom colors, hover, spacing, and radius — with semantic nav HTML and copy-ready code. Free.
💡 How to use
- Style the navigation and choose horizontal or vertical.
- Copy the HTML and CSS together — it is a semantic
<nav>list, good for SEO and accessibility. - Swap the links for your own pages.
Free CSS Menu Generator
Create a styled navigation menu with CSS and copy the code in one click. Choose horizontal or vertical, set item colors, hover state, spacing, padding, and radius with a live preview — then paste ready-to-use, semantic nav HTML and CSS. Free, no sign-up, runs in your browser.
What this tool does
This generator builds a clean navigation menu — the row of links at the top of most websites — without writing the CSS by hand. You control the colors, hover effect, spacing, and shape, and get back semantic HTML (a nav element wrapping a list of links) plus matching CSS. It is ideal for prototyping headers, sidebars, and footer navigation quickly.
How to use the menu generator
It is instant:
- Choose a horizontal or vertical layout.
- Set the item background, text color, and hover color.
- Adjust the gap, padding, and corner radius.
- Copy the HTML and CSS, then replace the links with your pages.
Why the markup is a nav and a list
The generated menu uses a nav element around an unordered list of links, which is the semantically correct structure for site navigation. Screen readers announce it as a navigation landmark, letting users jump straight to it, and search engines understand the links as a menu. Styling a list this way — rather than a row of bare divs — keeps your navigation accessible and SEO-friendly with no extra effort.
Horizontal vs vertical menus
A horizontal menu suits a site header with a handful of top-level links, while a vertical menu works well for sidebars, dashboards, and mobile navigation. The only real difference in the CSS is the flex-direction, which this tool switches for you. For responsive sites, a common pattern is a horizontal menu on desktop that becomes a vertical stack on small screens, which you can achieve by changing flex-direction inside a media query.
Styling menus with flexbox
The menu is laid out with flexbox, which makes spacing and alignment simple: a gap between items, easy centering, and clean wrapping. Because each link is a block-level element with its own padding, the whole item is clickable — a bigger, friendlier tap target than styling just the text. The hover transition gives immediate feedback, signalling that the items are interactive.
Pro tip
Give the current page's link an .active class with a distinct style so visitors always know where they are, and store your menu colors as CSS variables for easy theming and dark mode. For a mobile toggle, combine this menu with our CSS Toggle Switch or a checkbox-based hamburger. The Flexbox Generator can help fine-tune the layout.
FAQ
Is this CSS Menu Generator free?
Is the generated menu good for SEO and accessibility?
Can I make a vertical menu?
How do I highlight the current page?
Does the whole menu item become clickable?
How do I make the menu responsive?
Does it work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.