Navigation

Because the navigation of a website can be such an integral part of its unique design, we've done our best to keep top-level menu styling as simple as possible, for easy CSS extending.

However, one of the most notable features of our navigation menus is the support for dropdown (or "fly-out") menus, which are always triggered with a hover state. This is done with custom styling and JavaScript from the Front Street framework. When building the navigational elements discussed in this article, you can add support for our dropdown script by simply adding the class fs-menu. Also add class no-js to allow dropdowns to function when the browser doesn't have JavaScript; this is optional.

And for any of the navigation bars, if you'd like to utilize Front Street for coloring them, use any of the color classes to set a background color and classes text-light and text-dark to adjust the text.

Primary Navigation

For a basic navigation bar, create an unordered list of links with class menu-bar. You can also nest additional second-level and third-level unordered lists within for submenus. And for all levels, make sure to add class menu-btn to any link <a> tags.

Vertical Primary Navigation

By default, the .menu-bar element is inherently vertical and will fill the width of its current container.

In the following example, we've got an unordered list with with class menu-bar added. For coloring, the classes bg-light and text-dark have been added. Also, an example of a second-level and third-level menu has been nested within.

Dropdown Menus

And to present those second-level and third-level menus as dropdown (or "fly-out") menus, add the class fs-menu to the .menu-bar element. — And for fun, this time we've added the classes red and text-light for coloring.

And an additional feature available when working with a .fs-menu element is that you can use these color classes on the second-level and third-level submenus, as well; so you'll see we've expanded on the previous example to include classes crimson and text-light to the submenus.

Horizontal Primary Navigation

Because the .menu-bar element is inherently vertical with stacked buttons, we need to add an additional class to align the buttons in a horizontal bar. You can use classes menu-bar-horz, menu-bar-horz-xs, menu-bar-horz-sm, menu-bar-horz-md, or menu-bar-horz-lg (see responsiveness below for more on which class you'd use).

Dropdown Menus

When working with a horizontal .menu-bar, you'll need to also add the fs-menu class to include any second-level and third-level submenus. And this will present them as dropdown (or "fly-out") menus. — And for fun, this time we've added the classes royal and text-light for coloring.

And when working with a horizontal .menu-bar with submenus, you must add color classes to the nested submenus. You'll notice in the following example we've added classes dark-blue and text-light to those nested unordered lists.

Secondary Navigation

Secondary navigation elements come in three styles — Bar, Tabs, and Pills. By default, all three styles will inherently stack vertically, but can be configured into a horizontal orientation by adding class submenu-horz.

And instead of using class submenu-horz, you can also use one of the responsive utility classes to make the .submenu-* element horizontal only at certain viewports. See the Responsiveness section for more details on that.

Submenu Bar

For a basic secondary navigation bar with a slightly altered look from the primary navigation bar, create an unordered list of links with class submenu-bar. You can also nest additional second-level and third-level unordered lists within for submenus. And for all levels, make sure to add class menu-btn to any link <a> tags.

By default, the .submenu-bar element is inherently vertical and will fill the width of its current container.

In the following example, we've got an unordered list with with class submenu-bar added. For coloring, the classes bg-light and text-dark have been added. Also, an example of a second-level and third-level menu has been nested within.

And an additional feature available when working with a .fs-menu element is that you can use these color classes on the second-level and third-level submenus, as well; so you'll see we've expanded on the previous example to include classes black and text-light to the submenu.

Horizontal Orientation

Because the .submenu-bar element is inherently vertical with stacked buttons, we need to add an additional class to align the buttons in a horizontal bar. You can use classes submenu-horz, submenu-horz-xs, submenu-horz-sm, submenu-horz-md, or submenu-horz-lg (see responsiveness below for more on which class you'd use).

When working with a horizontal .submenu, you'll need to also add the fs-menu class to include any second-level and third-level submenus. And this will present them as dropdown (or "fly-out") menus. — And for fun, this time we've added the classes dark-purple and text-light for coloring.

And when working with a horizontal .submenu with submenus, you must add color classes to the nested submenus. You'll notice in the following example we've added classes pink and text-light to that nested unordered list.

Horizontal Orientation

Because the .sbumenu-tabs element is inherently vertical with stacked buttons, we need to add an additional class to align the buttons in a horizontal row. You can use classes submenu-horz, submenu-horz-xs, submenu-horz-sm, submenu-horz-md, or submenu-horz-lg (see responsiveness below for more on which class you'd use).

Horizontal Orientation

Because the .sbumenu-tabs element is inherently vertical with stacked buttons, we need to add an additional class to align the buttons in a horizontal row. You can use classes submenu-horz, submenu-horz-xs, submenu-horz-sm, submenu-horz-md, or submenu-horz-lg (see responsiveness below for more on which class you'd use).

Responsiveness

From above, you know that to make your .menu-bar and .submenu-* elements display horizontally, you can add the classe menu-bar-horz and submenu-horz. However, this doesn't account for any responsiveness.

The menu-bar class can be paired with any of the menu-bar-horz-* classes. And similarly, submenu-bar, submenu-tabs, and submenu-pills can all be paired with any of the submenu-horz-* classes.

.menu-bar-horz

Classes containing no breakpoint will never stack. This is not recommended in most cases and especially not recommended if your menu includes submenus.

.submenu-horz

.menu-bar-horz-xs

Classes containing xs will collapse and begin to stack when viewport is less than 576px. This will generally include smaller mobile devices.

.submenu-horz-xs

.menu-bar-horz-sm

Classes containing sm will collapse and begin to stack when viewport is less than 768px. This will generally include slightly larger mobile devices (or those in the landscape orientation) and smaller mobile devices.

.submenu-horz-sm

.menu-bar-horz-md

Classes containing md will collapse and begin to stack when viewport is less than 992px. This will generally include tablets (in portrait orientation) and any mobile device smaller than that.

.submenu-horz-md

.menu-bar-horz-lg

Classes containing lg will collapse and begin to stack when viewport is less than 1200px. This will generally include smaller desktop computers, and all tablets and mobile devices.

.submenu-horz-lg

In the following example, we've got a .menu-bar element as we've discussed above, but now the class menu-bar-horz-md has been used instead of menu-bar-horz. And so this means the menu will stack when the viewport is less than 992px.