Awesomeness

Flyout

The flyout is a common navigation pattern for small screens. This responsive flyout component converts to a sidebar and a top bar on medium and large screens. Its behaviour across breakpoints can be set through corresponding variables in _flyout.scss.

Note

The Awesomeness framework itself uses the flyout as navigation pattern. Since that is the best and most effective way to show you how it works, you will not find an example on this page.

Imports

  • SASS:
    @import "base";
@import "imports/modules/flyout";
  • Javascript:
    require("flyoutcontroller"], function(FlyoutController)
{
	FlyoutController.init();
});

Code

<div class="container flyout js-flyout">

	<header class="flyout__content js-flyout__content">
		<div class="bar">
			<a href title="Toggle main navigation" class="bar__item flyout__toggle js-flyout__toggle"><i class="fa fa-bars"></i></a>
			<a href title="Toggle main navigation" class="bar__item sidebar__toggle js-sidebar__toggle"><i class="fa fa-indent"></i><i class="fa fa-outdent"></i></a>
			<h1 class="bar__item bar__title"><a class="bar__link" href="/">Awesomeness</a></h1>
		</div>
	</header>

	<nav class="flyout__nav js-flyout__nav">
		<ul class="flyout__items">
			<li class="flyout__item">
				<a class="flyout__link" href="/typography/" title="Show me this"><i class="fa fa-fw fa-font"></i> Typography</a>
			</li>
			<li class="flyout__item">
				<a class="flyout__link" href="/forms/" title="Show me this"><i class="fa fa-fw fa-edit"></i> Forms</a>
				<ul class="flyout__sub-items">
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/forms/buttons/"> Buttons</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/forms/selection/"> Selection</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/forms/input-fields/"> Input Fields</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/forms/validation/"> Validation</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/forms/special-inputs/"> Special Inputs</a></li>
				</ul>
			</li>
			<li class="flyout__item flyout__item--is-active">
				<a class="flyout__link" href="/navigation/" title="Show me this"><i class="fa fa-fw fa-compass"></i> Navigation</a>
				<ul class="flyout__sub-items">
					<li class="flyout__sub-item"><a class="flyout__sub-link flyout__link--is-active" href="/navigation/flyout/"> Flyout</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/navigation/tabs/"> Tabs</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/navigation/wizard/"> Wizard</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/navigation/pagination/"> Pagination</a></li>
				</ul>
			</li>
			<li class="flyout__item">
				<a class="flyout__link" href="/components/" title="Show me this"><i class="fa fa-fw fa-rocket"></i> Components</a>
				<ul class="flyout__sub-items">
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/components/accordion/"> Accordion</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/components/slider/"> Slider</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/components/calendar/"> Calendar</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/components/table/"> Table</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/components/box/"> Box</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/components/panel/"> Panel</a></li>
					<li class="flyout__sub-item"><a class="flyout__sub-link" href="/components/loading-indicators/"> Loading Indicator</a></li>
				</ul>
			</li>
		</ul>
	</nav>

	<main class="flyout__content flyout__content--main js-flyout__content">
		Content here...
	</main>

	<footer class="flyout__content flyout__content--main js-flyout__content">
		Content here...
	</footer>
</div>