Menu
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 menu 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 Menu
For a basic menu 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 Menu
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.
<ul class="menu-bar bg-light text-dark">
And next, we've altered the markup from above to include the primary branding background color class and text-light to lighten the text.
<ul class="menu-bar primary text-light">
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.
<ul class="menu-bar fs-menu no-js red text-light">
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.
<ul class="menu-bar fs-menu no-js red text-light">
Horizontal Primary Menu
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).
<ul class="menu-bar menu-bar-horz bg-light text-dark">
And again, we can use whichever color classes we want. This next example is the same as above, but with classes primary and text-light used.
<ul class="menu-bar menu-bar-horz-sm primary text-light">
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.
<ul class="menu-bar menu-bar-horz-sm fs-menu no-js royal text-light">
Note: If you don't want a menu link to be clickable by the user, you can add the class no-click. You'll see this used in the example above to make the top-level "About" menu item not clickable.
Mega Menus
<ul class="menu-bar menu-bar-horz-sm fs-menu no-js royal text-light">
Secondary Menu
Secondary menu 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 menu bar with a slightly altered look from the primary menu 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.
<ul class="submenu-bar bg-light text-dark">
And again, we can use whichever color classes we want. This next example is the same as above, but with classes primary and text-light used.
<ul class="submenu-bar primary text-light">
Dropdown Menus
If you'd like nested submenus to have the dropdown (or "fly-out") effect, you can add class fs-menu. — And to mix things up, we've adjusted the color classes from the previous example, as well.
<ul class="submenu-bar fs-menu no-js jungle text-light">
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.
<ul class="submenu-bar fs-menu no-js jungle text-light">
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).
<ul class="submenu-bar submenu-horz-sm bg-light text-dark">
And again, we can use whichever color classes we want. This next example is the same as above, but with classes primary and text-light used.
<ul class="submenu-bar submenu-horz-sm primary text-light">
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.
<ul class="submenu-bar submenu-horz-sm fs-menu no-js dark-purple text-light">
Mega Menus
<ul class="submenu-bar submenu-horz-sm fs-menu no-js dark-purple text-light">
Tabs
To create a tabbed menu, add class submenu-tabs to an unordered list.
Note that this style of menu is meant to be displayed as either dark or light. So you can't add color classes to it to make it any color. Below is the default light look.
<ul class="submenu-tabs">
When the tabs are contained within a parent element with darker background and class text-light, they will take on the darker look.
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).
<ul class="submenu-tabs submenu-horz">
Nested Submenus
Similarly to the other menus mentions, you can nest unordered lists within, as well.
<ul class="submenu-tabs">
And if you'd like nested submenus to have the dropdown (or "fly-out") effect, you can add class fs-menu.
<ul class="submenu-tabs fs-menu">
<ul class="submenu-tabs submenu-horz fs-menu">
Pills
To create a similar tabbed menu but with pills look, add class submenu-pills to an unordered list.
Note that this style of menu is meant to be displayed as either dark or light. So you can't add color classes to it to make it any color. Below is the default light look.
<ul class="submenu-pills">
When the tabs are contained within a parent element with darker background and class text-light, they will take on the darker look.
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).
<ul class="submenu-pills submenu-horz">
Nested Submenus
Similarly to the other menus mentions, you can nest unordered lists within, as well.
<ul class="submenu-pills">
And if you'd like nested submenus to have the dropdown (or "fly-out") effect, you can add class fs-menu.
<ul class="submenu-pills fs-menu">
<ul class="submenu-pills submenu-horz fs-menu">
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.
So instead, to make your menus responsive, you can utilize one of the menu-bar-horz-* or submenu-horz-* classes to specify a stacking point. This works similarly to the grid system and determining your stacking point there.
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.
<ul class="menu-bar menu-bar-horz-md fs-menu no-js bg-dark text-light">
And in this example, the class submenu-horz-sm has been used with the .submenu-bar element. This means it will stack when the viewport is less than 768px.
<ul class="submenu-bar submenu-horz-sm fs-menu no-js bg-light text-dark">