Internet, Networking, & Security Web Development How to Create Tabbed Navigation With CSS and No Images By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated June 24, 2019 Degui Adil / EyeEm / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email Navigation on web pages is a form of a list, and tabbed navigation is like a horizontal list. It's fairly easy to create horizontal tabbed navigation with CSS, but CSS 3 gives us a few more tools to make them look even nicer. This tutorial will take you through the HTML and CSS needed to create a CSS tabbed menu. Click on that link to see how it will look. This tabbed menu uses no images, just HTML and CSS 2 and CSS 3. It can be easily edited to add more tabs or change the text in them. Browser Support This tab menu will work in all major browsers including Firefox, Safari, Opera, Edge, and Chrome. Write Your Menu List Jennifer Kyrnin All navigation menus and tabs are really just an unordered list. So the first thing you want to do is write an unordered list of links to where you want your tabbed navigation to go. This tutorial is assuming that you're writing your HTML in a text editor and that you know where to place the HTML for your menu on your web page. Write your unordered list like this: CSS 3id="current">TabsForMenusclass="tablist"> You'll notice that the code calls out two things: class="tablist" and id="current". The first is required. If you don't put the tablist class on your unordered list, the tabs won't work. The second is optional. Put the id="current" on whichever tab you'd like to be highlighted on that page. We usually use this to highlight the page that we're on, but you can use it to highlight the most important tab. Or you can remove it completely. Start Editing Your Style Sheet You can use either an external style sheet or an internal style sheet. The sample menu page uses an internal style sheet in the <head> of the document. First We'll Style the UL Itself This is where we use the class in the HTML. Rather than styling the UL tag, which would style all unordered lists on your page, you should style only the UL class. So the first entry in your CSS should be: We like to put in the ending curly brace (}) ahead of time, so we don't forget it later. While we're using an unordered list tag for the tab menu list, but we don't want any bullets or numbers creeping in. So the first style you should add is. This tells the browser that while it's a list, it's a list with no pre-determined styles (like bullets or numbers). Then, you can set the height of your list to match the space you want it to fill. We chose 2em for our height, as that's double the standard font size, and gives about half an em above and below the text of the tab. But you can set your width to whatever size you'd like. UL tags will automatically take up 100% of the width, so unless you want it to be smaller than the current container, you can leave the width out. Finally, if your master stylesheet doesn't have presets for UL and OL tags, you will want to put them in. This means that you should turn off the borders, margins, and padding on your UL. If you already have reset the UL tag, you can change the margins, padding, or border to something that fits with your design. Your final .tablist class should look like this: Editing the LI List Items Once you've styled your unordered list, you need to style the LI tags inside it. Otherwise, they will act like a standard list and each move to the next line without placing your tabs correctly. First, set up your style property: Then you want to float your tabs so that they line up on the horizontal plane. And don't forget to add some margin between the tabs, so they don't merge together. Your li styles should look like this: Making the Tabs Look Like Tabs with CSS 3 To do most of the heavy lifting in this stylesheet, we're targeting the links within the unordered list. Browsers recognize that links do more on a web page than other tags, so it's easier to get older browsers to comply with things like hover states if you attach them to the anchor tag (links). So first write your style properties: Because these tabs should act like tabs in an application, you want the entire area of the tab to be clickable, not just the linked text. To do this, you have to convert the A tag from it's normal "inline" state into a block element. (If you're interested in knowing more about the difference, read .) Then, an easy way to force your tabs to be symmetrical with one another, but still flex to fit the width of the text is to make the right and left padding the same. We used the padding shorthand property to set the top and bottom to 0 and the right and left to 1em. We also chose to remove the link underlines, so that the tabs look less like links. But if your audience might be confused by that, leave out this line. By putting a thin border around the tabs, it makes them look like tabs. We used the border shorthand property to put the border around all four sides And then used the property to remove it from the bottom. Then we made some adjustments to the font, color, and background color of the tabs. Set these to the styles that match your site. All of the above styles should go in the selector the rule so that they affect the anchor tags in general. Then to make the tabs appear more clickable, you should add a few state rule We like to change the color of the text and background to make the tab pop when you mouse over it. And we included another reminder to the browsers that we want the link to remain not underlined. Another common method is to turn the underline back on when you mouse over the tab. If you want to do that, change it to But Where is the CSS 3? If you've been paying attention, you've probably noticed that there haven't been any CSS 3 styles used in the style sheet. This has the advantage of working in any modern browser, including Internet Explorer. But it doesn't make the tabs look like anything more than square boxes. By adding a CSS 3 style call border-radius (and it's associated browser-specific calls) you can make the edges rounded, to look more like tabs on a manila folder. The styles you should add to the rule are: These are the final style rules we wrote: With these styles, you have a tabbed menu that works in all major browsers and looks like nice printed tabs in CSS 3 compliant browsers. The next page gives you one more option you can use to dress it up even more. Highlight the Current Tab In the HTML we created, the UL had one list element with an ID. This allows you to give one LI a different style from the rest. The most common situation is to make the current tab stand out in some way. Another way to think of this is that you want to gray out the tabs that aren't live. You then change where the id is on different pages. We style both the #current A tag as well as the #current A: hover sta so that both are slightly different. You can change the color, background color, even the height, width and padding of that element. Make whatever changes make sense in your design. And you're done! You've just created a tabbed menu for your website.