Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Foundation for Apps

Foundation for Beginners: The Top Bar

Read Time:4 minsLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: Navigation
How to Customize the Foundation 4 Top Bar

Let's take a look at the top bar included within the Foundation framework. As there’s quite a lot to cover we’ll break it down into easy chunks.


Top Bar, or no Top Bar

Foundation's top bar is a very useful little component, but it's by no means obligatory to use it in your builds. I'd estimate that I've made use of it in around 40% of the projects I've built with Foundation. Give careful consideration to whether or not it fits the needs of your project; the top bar component is as easy to style as any other, but the interaction is pretty much set.

The Essential Structure

To begin building up the top bar we need a <nav> tag, with the requisite class of "top-bar".


Inside that lies a <ul> and two <li>’s, one of which will hold our title/logo the other our "mobile" menu.

Note: you can remove either the class "menu-icon", or the content "Menu", if you prefer to have just one of the two showing.

Adding Parent Links

Adding parent links is our next objective, so before our closing nav tag add in a <section> with the class "top-bar-section". In this section we need to add an unordered list with several list items.


Foundation has a useful class "divider" which can be applied to empty list items, allowing you to separate each menu link with an attractive line. They're used in the following example to divide our menu links.

You’ll also notice that the ul has the "left" class applied to it, which sends things to the left. You could, for example, have two sets of menu links, one floating left and one (using the “right” class) floating right.

All the links we've added so far will be displayed horizontally along the bar. On smaller screens they'll become a dropdown, activated by the Menu button we added earlier.

Adding Submenus


Each list item can contain a nested unordered list for sub menus. In order for this to work and be displayed properly, the “has-dropdown” class must be applied to the parent link, with the class "dropdown" being applied to the nested unordered list:

Note: To mark the current page link active, add an “active” class.

Submenus are displayed as a standard dropdown under "large screen" circumstances. On smaller screens they slide in from "off screen".


Additional Settings

In spite of being referred to as the ‘top’ bar, you can place this component anywhere in your layout. If you need the bar to stay fixed on the page whilst you scroll, you can wrap the top bar in a div with the class “fixed”. Alternatively, if you want to keep the top bar within your main container you can set the width of the top bar to the grid width by using the “contain-to-grid” class. Happily, you can use both of these classes (“contain-to-grid” and “fixed”) in combination.

Let’s say you want the top bar in the center of the layout, but need the bar to stick to the top of the page when the user scrolls down. This is possible by wrapping the top bar in the “contain-to-grid” and “sticky” classes.

Adding a Search Input


If all those handy features weren’t enough, you might also want to add an input which you could use for search, or a mailing list signup, or anything you want. When adding form elements within a menu list item, we need to add a class of “has-form”. You can see from the code below that we are actually making use of the grid within the top bar. This makes placement of the elements easy - and of course responsive, as the columns shift layout on small screens.



Breadcrumbs are commonplace on CMS-based websites, such as Wordpress, where multi-level page hierarchy can get a little complex. These can be used in any Foundation project by simply adding the “breadcrumbs” class to either a <ul> tag or a <nav> tag. When using the unordered list, all links need to be in list items, whereas the links inside the nav element need to be anchor tags.

The only additional classes included in the breadcrumb markup are “unavailable” and “current”.

Coming up Next

The top bar is very flexible and is simple enough to incorporate in any of your foundation-based projects. In the next part of this session we’ll talk about buttons, dropdowns and the clearing plugin.

Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.