Advertisement
HTML/CSS

Foundation for Beginners: The Top Bar

by

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.

foundation-4-1

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".

foundation-4-2

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.

<nav class="top-bar">
    <ul class="title-area">
        <li class="name">
             <h1><a href="#">Top Bar Title </a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
        </li>
    </ul>
</nav>

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-4-3

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.

<section class="top-bar-section">
	<ul class="left">
		<li class="divider"></li>
		<li class="active"><a href="#">Main Item 1</a></li>
		<li class="divider"></li>
		<li><a href="#">Main Item 2</a></li>
		<li class="divider"></li>
	</ul>
</section>

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

foundation-4-4

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:

<li class="has-dropdown"><a href="#">Main Item 3</a>
	<ul class="dropdown">
		<li><label>Dropdown Level 3 Label</label></li>
		<li><a href="#">Dropdown Level 3a</a></li>
		<li><a href="#">Dropdown Level 3b</a></li>
		<li class="divider"></li>
		<li><a href="#">Dropdown Level 3c</a></li>
	</ul>
</li>
<li class="divider"></li>

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".

foundation-top-bar

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.

<div class="contain-to-grid sticky">
	<nav class="top-bar">
		<!--nav content-->
	</nav>
</div>

Adding a Search Input

foundation-4-5

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.

<li class="has-form">
	<form>
		<div class="row collapse">
			<div class="small-8 columns">
				<input type="text">
			</div>
			<div class="small-4 columns">
				<a href="#" class="alert button">Search</a>
			</div>
		</div>
	</form>
</li>

Breadcrumbs

foundation-4-6

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”.

<ul class="breadcrumbs">
	<li><a href="#">Home</a></li>
	<li><a href="#">Features</a></li>
	<li class="unavailable"><a href="#">Gene Splicing</a></li>
	<li class="current"><a href="#">Cloning</a></li>
</ul>

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.

Related Posts
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…
  • Web Design
    HTML/CSS
    How to Customize the Foundation 4 Top BarFoundation preview
    Zurb's Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we're going to look at how you can implement it in a different way, placing it elsewhere on the page, giving you a custom and responsive horizontal navigation menu.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Buttons and DropdownsFoundation button retina
    In this part of "Foundation for Beginners" we’ll look at buttons, dropdowns and the "Clearing" plugin.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: NavigationFoundation 3 retina
    One of the most important aspects of a front-end framework is how it handles navigation. In this part of Foundation for Beginners, we'll take a look at several forms of navigation, along with some JavaScript tools which add extra flourish. I’ll also introduce you to another helpful tool which will help you to become a better Foundation developer.Read More…