5 A generic, flexible menu component.
8 - Orient horizontally and vertically
9 - Change orientation at certain breakpoints
10 - Items with icons above, below, or to the left or right
11 - Text labels for vertical menus and badges for horizontal menus
14 /// @Foundation.settings
16 $menubar-fontsize: 1rem !default;
17 $menubar-background: #fff !default;
18 $menubar-background-hover: smartscale($menubar-background, 7%) !default;
19 $menubar-background-active: $menubar-background-hover;
20 $menubar-color: isitlight($menubar-background) !default;
21 $menubar-color-hover: $menubar-color !default;
22 $menubar-color-active: $menubar-color-hover;
24 $menubar-item-padding: $global-padding !default;
25 $menubar-icon-size: 25px !default;
26 $menubar-icon-spacing: $menubar-item-padding !default;
34 list-style-type: none;
38 // This flex setting makes each item an equal width
42 // Link inside menu item
45 flex-flow: column nowrap;
47 padding: $menubar-item-padding;
48 font-size: $menubar-fontsize;
54 @mixin menu-bar-layout (
55 $orientation: horizontal,
61 @if $orientation == horizontal {
63 flex-flow: row nowrap;
65 flex-flow: column nowrap;
69 flex-flow: column nowrap;
71 flex-flow: row nowrap;
79 @if $stretch == false {
85 @mixin menu-bar-style(
86 $background: $menubar-background,
87 $background-hover: $menubar-background-hover,
88 $background-active: $menubar-background-active,
89 $color: $menubar-color,
90 $color-hover: $menubar-color-hover,
91 $color-active: $menubar-color-active,
96 $background-hover: smartscale($background, 7%);
97 $background-active: $background-hover;
99 $color: isitlight($background);
100 $color-hover: $color;
101 $color-active: $color;
105 background: $background;
112 background: $background-hover;
117 background: $background-active;
123 .iconic { @include color-icon($color); }
127 @mixin menu-bar-icons(
129 $size: $menubar-icon-size
135 @if $menubar-icon-size != false {
136 width: $menubar-icon-size;
137 height: $menubar-icon-size;
142 @if $position == left {
144 flex-flow: row nowrap;
146 > img, > .iconic { margin: 0 $menubar-icon-spacing 0 0; }
149 @if $position == top {
151 flex-flow: column nowrap;
152 > img, > .iconic { margin: 0 0 $menubar-icon-spacing 0; }
155 @if $position == right {
157 flex-flow: row-reverse nowrap;
158 > img, > .iconic { margin: 0 0 0 $menubar-icon-spacing; }
161 @if $position == bottom {
163 flex-flow: column-reverse nowrap;
164 > img, > .iconic { margin: $menubar-icon-spacing 0 0 0; }
170 @mixin menu-bar-labels(
173 $offset: $menubar-item-padding,
177 $selector: '.menu-bar-label'
183 @if $x == left or $x == right {
184 padding-#{$x}: $size + $offset * 2;
191 font-size: $size * 0.75;
196 border-radius: 1000px;
197 background: $background;
198 color: if($color == auto, isitlight($background), $color);
200 pointer-events: none;
202 @if $x == left or $x == right {
206 @if $y == top or $y == bottom {
211 transform: translateY(-50%);
217 Set the alignment of menu items (li) within a menu-bar
219 left: Items align to the left.
220 right: Items align to the right.
221 center: Items align to the center.
222 justify: Items are spaced equally apart so they occupy the space of the entire grid.
223 spaced: Items are given equal space to their left and right.
227 @param {string} $align - Alignment to use.
229 @output An appropriate justify-content value.
231 @mixin menu-bar-align($align: left) {
236 justify: space-between,
237 spaced: space-around,
239 justify-content: map-get($options, $align);
245 @include exports(menu-bar) {
248 @include menu-bar-style;
251 &, &.horizontal { @include menu-bar-layout(horizontal); }
252 &.vertical { @include menu-bar-layout(vertical); }
256 > li { flex: 0 0 auto; }
260 &.align-right { @include menu-bar-align(right); }
261 &.align-center { @include menu-bar-align(center); }
262 &.align-justify { @include menu-bar-align(justify); }
263 &.align-spaced { @include menu-bar-align(spaced); }
265 @each $size in $breakpoint-classes {
266 @include breakpoint($size) {
267 &.#{$size}-condense { li { flex: 0 0 auto; } }
268 &.#{$size}-expand { li { flex: 1 0 auto; } }
270 // Responsive Alignment
271 &.#{$size}-align-left { @include menu-bar-align(left); }
272 &.#{$size}-align-right { @include menu-bar-align(right); }
273 &.#{$size}-align-center { @include menu-bar-align(center); }
274 &.#{$size}-align-justify { @include menu-bar-align(justify); }
275 &.#{$size}-align-spaced { @include menu-bar-align(spaced); }
279 // Responsive positioning
280 @each $size in $breakpoint-classes {
281 @include breakpoint($size) {
282 &.#{$size}-horizontal {
283 @include menu-bar-layout(horizontal);
285 &.#{$size}-vertical {
286 @include menu-bar-layout(vertical);
292 &, &.icon-top { @include menu-bar-icons(top); }
293 &.icon-right { @include menu-bar-icons(right); }
294 &.icon-bottom { @include menu-bar-icons(bottom); }
295 &.icon-left { @include menu-bar-icons(left); }
296 @each $size in $breakpoint-classes {
297 @each $pos in (top, right, bottom, left) {
298 @include breakpoint($size) {
299 &.#{$size}-icon-#{$pos} { @include menu-bar-icons($pos); }
305 &.label-side { @include menu-bar-labels(right, center); }
306 &.label-corner { @include menu-bar-labels(right, top); }
310 @include menu-bar-style($primary-color, $autocolor: true);
313 @include menu-bar-style($dark-color, $autocolor: true);
318 padding: $menubar-item-padding;
328 justify-content: space-between;
331 @include breakpoint(medium) {
335 > .menu-group-left, > .menu-group-right {
338 @include breakpoint(medium) {
343 // Menu bar is condensed
345 > li { flex: 0 0 auto; }
349 // Coloring class cascades down to the menu bar
351 background-color: $primary-color;
353 @include menu-bar-style($primary-color, $autocolor: true);
357 background-color: $dark-color;
359 @include menu-bar-style($dark-color, $autocolor: true);