Navigation et menus

Vue d'ensemble

Une barre de menu est définie par le tag <nav>. La barre et les éléments de type liste <ul> utilisent les flexbox MDN Référence pour contrôler le positionnement des différents éléments pouvant composer un menu (logo, liens etc...), il faudra utiliser les classes utilitaire flex. Par défaut, la barre de navigation prend toute la largeur de la surface d'affichage et les éléments sont espacés uniformément.

Sass Swing met à disposition la classe .navbar à utiliser avec un autre tag que <nav> tel qu'une <div>. Dans ce cas, il faudra utiliser l'attribut d'accessibilité : role="navigation" pour identifier explicitement, le conteneur comme une région de navigation pour les utilisateurs de technologies d'assistance. 

<nav>
	<ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
		<li><a href="#">Lien 4</a></li>
	</ul>
</nav>

<nav>
	<a href="#">LOGO</a>
	<ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
		<li><a href="#">Lien 4</a></li>
	</ul>
</nav>

<nav class="flex--left">
	<a href="#">LOGO</a>
	<ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
		<li><a href="#">Lien 4</a></li>
	</ul>
</nav>

<nav class="flex--center">
	<ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
		<li><a href="#">Lien 4</a></li>
	</ul>
</nav>

<nav class="flex--right">
	<ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
		<li><a href="#">Lien 4</a></li>
	</ul>
</nav>

<div role="navigation" class="navbar flex--center">
	<ul class="flex--column">
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
		<li><a href="#">Lien 4</a></li>
	</ul>
</div>

Adaptation et menu "burger"

Pour créer un menu burger, qui s'adaptera en fonction des dimensions de la surface d'affichage est très simple. Il faut tout d'abord englober le menu <nav> dans un élément <div>, <header>, <footer> etc.. et lui ajouter la classe navigation.

Sass Swing n'utilise pas par défaut de Javascript. A la place il utilise une checkbox pour contrôler l'ouverture et la fermeture du menu. La philosophie étant Mobile-First, le burger par défaut est visible. Pour l'interaction celui-ci est affiché via une balise <label>.

Pour contrôler le comportement du menu, dans le conteneur navigation, il faudra lui ajouter des classes supplémentaires telle que navigation--sticky ou navigation--fixed qui permet de garder le menu visible.

Pour contrôler, afficher le menu complet et cacher le bouton burger, il suffit d'ajouter la classenavigation-toggle et de la préfixer avec le point d'arrêt choisi pour contrôler ce comportement. Il faut également englober le menu principal, généralement décrit via une balise <ul> avec une balise <div> avec comme classe navbar__menu 

<header class="navigation md:navigation-toggle">
	<nav>
		<input type="checkbox"  id="nav-toggle-test" aria-checked="false">
		<ul>
			<li>MENU</li>
		</ul>
		<div id="test-menu" class="navbar__menu">
			<ul>
				<li><a href="#">Lien 1</a> </li>
				<li><a href="#">Lien 2</a> </li>
				<li><a href="#">Lien 3</a></li>
				<li><a href="#">Lien 4</a></li>
			</ul>
		</div>
		<label for="nav-toggle-test" class="navbar__toggler" aria-haspopup="true" aria-controls="test-menu" aria-label="Open or close test menu">
			<span class="navbar__toggler__icon">&nbsp;</span>
		</label>
	</nav>
</header>

Sous-menus

L'ajout de sous-menu est aisée. Pour se faire, il suffit d'ajouter la classe .dropdown-item à un élément <li> du menu. Puis d'ajouter un enfant de type <ul>. Pour personnaliser encore plus ce sous-menu, il faut ajouter un conteneur (une "div" par exemple) avec la classe .dropdown-item__menu qui englobera tous les éléments du sous-menu.

La fonctionnalité Menu déroulant fait partie des composants EXTRA. Elle peut être utilisée n'importe où dans la page, pour créer un menu s'affichant au survol. Elle peut s'intégrer facilement à l'intérieur d'une barre de navigation. 

<span role="button" class="btn--secondary dropdown" style="--mb:var(--block-half-spacing)">
	Actions
	<ul style="--gap:.5em;">
		<li><a href="#">Action 1</a></li>
		<li><a href="#">Action 2</a></li>
		<li class="dropdown">
			<a href="#">Action 3</a>
			<ul style="--gap:.5em;">
				<li><a href="#">Action 3a</a></li>
				<li><a href="#">Action 3b</a></li>
				<li><a href="#">Action 3c</a></li>
				<li><a href="#">Action 3d</a></li>
			</ul>
		</li>
		<li><a href="#">Action 4</a></li>
	</ul>
</span>

<header class="navigation md:navigation-toggle" style="--m:0; --p:0;">
	<nav>
		<input type="checkbox"  id="nav-toggle-test-dropdown" aria-checked="false">
		<ul>
			<li>MENU</li>
		</ul>
		<div id="test-menu-dropdown" class="navbar__menu flex--center">
			<ul>
				<li><a href="#">Lien 1</a> </li>
				<li class="dropdown-item">
					<a href="#">Lien 2</a>
					<ul>
						<li><a href="#">Lien 2a</a></li>
						<li class="dropdown-item">
							<a href="#">Lien 2b</a>
							<ul class="dropdown-item__submenu--left">
								<li><a href="#">Lien 2b.1</a></li>
								<li><a href="#">Lien 2b.2</a></li>
								<li class="dropdown-item">
									<a href="#">Lien 2b.3</a>
									<ul>
										<li><a href="#">Lien 2b.3a</a></li>
										<li><a href="#">Lien 2b.3b</a></li>
										<li><a href="#">Lien 2b.3c</a></li>
										<li><a href="#">Lien 2b.3d</a></li>
									</ul>
								</li>
								<li><a href="#">Lien 2b.4</a></li>
							</ul>
						</li>
						<li><a href="#">Lien 2c</a></li>
					</ul>
				</li>
				<li><a href="#">Lien 3</a></li>
				<li><a href="#">Lien 4</a></li>
			</ul>
		</div>
		<label for="nav-toggle-test-dropdown" class="navbar__toggler" aria-haspopup="true" aria-controls="test-menu" aria-label="Open or close dropdown menu">
			<span class="navbar__toggler__icon">&nbsp;</span>
		</label>
	</nav>
</header>

Personnalisation

En cours d'amélioration