Navbar Component

Navbar is the navigation menus for users to navigate across the websites. To avoid using Javascript, Bissetii supports most of its navigation styling using specific HTML pattern especially when using the <input type='checkbox'> toggling trick.

This component is available starting from v1.11.0.

Javascript Parts

This component does not depend on any Javascript.

Sass Styling Parts

The Sass styling scripts are located at:

assets/css/bissetii/modules/core/_Nav.scss
assets/css/bissetii/modules/nav/*

The index script (_.scss) is a mixins compiler where it takes in a number of configs to setup the correct mixin groups to include in. The configs will be detailed in the HTML Parts sub-sections.

The base script (core/_Nav.scss) governs the module’s private variables and fallback design when user forgets to specify the navbar types via class or ID tags. This script will automatically be included when one or many types of navbars are included together.

The sidebar script (_Sidebar.scss) is responsible for styling sidebar types navbar.

Changing Bullets

There are 2 different implementations depending on the version used.

Version v1.12.0 Onwards

From version v1.12.0, the Sass embedded default symbols were completely removed to facilitate flexiblity. The list items must comply to the 2 <span> format: 1 for bullet and tab spacing, and 1 for text content.

To add symbol, you can add it into the <span class"nav-symbol> text. The new coding pattern for items with example are shown below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<li><a href="https://www.example.com">
	<span class="nav-symbol">⌁</span>
	<span>Item 1</span>
</a></li>
<li><a href="https://www.example.com">
	<span class="nav-symbol">✤</span>
	<span>Item 2</span>
</a></li>
<li><a href="https://www.example.com">
	<span class="nav-symbol"></span>
	<span>Item 3</span>
</a></li>

You should add the hyperlink coverage to the desired component on your side with absolute freedom.

As for navbar, it is added into the <label> tag:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<label id="navside-button-sidebar-222"
	class="navbar-button"
	for="nav-main-sidebar-222">
	<img class="navbar-button-open"
		alt="Open"
		src="https://www.domain.com/img/css/menu-icon.svg" />
	<img class="navbar-button-close"
		alt="Close"
		src="https://www.domain.com/img/css/close-icon.svg" />
</label>

Version v1.11.0 and Below

For version v1.11.0, to alter the bullets, you can supply the following configurations before importing/using Bissetii core modules:

$nav-bullet: "✤"
$nav-bullet-active: "⌁"
$nav-bullet-menu: "☰"
$nav-bullet-close: "✕"

HTML Parts

Bissetii introduces a number of navbars available for use.

Basic HTML Layouts

It can be quite taxing for HTML to cater navigation bar without using any Javascript. Hence, there are some basic rules for you to comply with in order to make Bissetii works.

This refers to the overall layout where <nav> always leads before <main> or equivalent content HTML semantics. One example is:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>
<head>
	...
</head>
<body>
	<nav>
		...
	</nav>
	<main>
		...
	</main>
	<footer>
		...
	</footer>
</body>
</html>

Tagging: class for CSS

Bissetii’s navbar applies via the class tag. Example, the following works:

<nav class="Sidebar">
	...
</nav>

Checkbox Input Toggle

Bissetii uses checkbox input to perform toggling action. It heavily relies on the associated <label> to provide good user experience actions. This section covers only the vanilla HTML. For AMP HTML, you must refer to the specific navbar.

There Is Always A Fallback Mode

Just in case, navbar always has a fallback mode for default styling in situation where designers forgotten to add the class tag. The fallback mode is rendered as a “Table of Contents” type of navigation. The Sass script for handling such fallback mode is _Base.scss.

Back to Index


A very common mode is the Sidebar type. Sidebar attaches itself to the left side of the parent (e.g. <body> or <div>). On mobile and tablet, Sidebar is rendered as hamburger drawer menu from the left. On bigger screen like desktop and beyond, it is the “always open” left sidebar that occupies 20% of the parent width.

Enable Sidebar (Sass)

In your Sass main script, you must supply the following config set to 1 before importing/using Bissetii Sass nav module:

$config-nav-sidebar: 1

Deploy Sidebar (HTML)

To enable Sidebar, attach the CSS class tag Sidebar to the <nav> tag. Example:

<nav class="Sidebar">
...
</nav>

Vanilla HTML Layout

For vanilla HTML, the default HTML layout is used and shown below. Each important points are highlighted and described.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<nav class="Sidebar">
	<header class="site-title">
		<p>Site Title</p>
	</header>
	<input id="nav-main-sidebar-UNIQUEID"
		class="navbar-button"
		type="checkbox" />
	<label id="navside-button-sidebar-UNIQUEID"
		class="navbar-button"
		for="nav-main-sidebar-UNIQUEID">
		<img src="https://bissetii.zoralab.com/en/img/css/menu-icon.svg"
			class="navbar-button-open"
			alt= "Open"
			width="33"
			height="35"
			loading="lazy" />
		<img src="https://bissetii.zoralab.com/en/img/css/close-icon.svg"
			class="navbar-button-close"
			alt= "Close"
			width="33"
			height="35"
			loading="lazy" />
	</label>
	<label id="navbar-shade-sidebar-UNIQUEID"
		class="nav-sidebar-shade"
		for="nav-main-sidebar-UNIQUEID">
	</label>
	<section>
		<header>
			<p>Menu Title</p>
		</header>
		<ul class="sidebar-mainmenu">
			<li><a href="#">
				<span class="nav-symbol">⌁</span>
				<span>Item 1</span>
			</a></li>
			<li><a href="#">
				<span class="nav-symbol">✤</span>
				<span>Item 2</span>
			</a></li>
			<li>
				<input id="submenu-SUBMENU-ID1"
					class="submenu"
					type="checkbox" />
				<label id="submenu-SUBMENU-ID1"
					class="submenu">
					<span class="nav-symbol">
						✤
					</span>
					<span>Sub-Category</span>
				</label>
				<ul id="submenu-SUBMENU-ID1"
					class="submenu">
					<li><a href="#">
						<span class="nav-symbol">⌁</span>
						<span>Item 1</span>
					</a></li>
					<li><a href="#">
						<span class="nav-symbol">✤</span>
						<span>Item 2</span>
					</a></li>
					<li><a href="#">
						<span class="nav-symbol"></span>
						<span>Item 3</span>
					</a></li>
				</ul>
			</li>
			<li><a href="#">
				<span class="nav-symbol"></span>
				<span>Item 3</span>
			</a></li>
		</ul>
	</section>
</nav>

Some noticable parts would be:

AMP HTML Layout

For AMP sidebar, its AMPHTML is entirely different from the vanilla HTML.

You must import amp-sidebar to facilitate the sidebar operations in the meta tag as documented in amp-sidebar.

Compared to vanilla HTML, AMPHTML uses less codes since most of the rendering are done by the amp-sidebar extension module. Hence, they are incompatible to each other.

The AMPHTML for Sidebar is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<nav class="Sidebar">
	<header class="site-title">
		<p>Site Title</p>
	</header>
	<button id="navside-button-222"
		class="navbar-button clean"
		on="tap:"UNIQUEID".toggle">
		<amp-img alt="Open"
			width="35"
			height="35"
			src="https://bissetii.zoralab.com/en/img/css/menu-icon.svg"
			layout="responsive">
		</amp-img>
	</button>
</nav>
<amp-sidebar id="222" layout="nodisplay" side="left">
	<button id="navside-button-222"
		class="navbar-button clean"
		on="tap:"UNIQUEID".close">
		<amp-img alt="Close"
			width="35"
			height="35"
			src="https://bissetii.zoralab.com/en/img/css/close-icon.svg"
			layout="responsive">
		</amp-img>
	</button>
	<header>
		<p>Menu Title</p>
	</header>
	<ul class="sidebar-mainmenu">
		<li><a href="#">
			<span class="nav-symbol">⌁</span>
			<span>Item 1</span>
		</a></li>
		<li><a href="#">
			<span class="nav-symbol">✤</span>
			<span>Item 2</span>
		</a></li>
		<li>
			<input id="submenu-SUBMENU-ID1"
				class="submenu"
				type="checkbox" />
			<label id="submenu-SUBMENU-ID1"
				class="submenu">
				<span class="nav-symbol">
					✤
				</span>
				<span>Sub-Category</span>
			</label>
			<ul id="submenu-SUBMENU-ID1"
				class="submenu">
				<li><a href="#">
					<span class="nav-symbol">⌁</span>
					<span>Item 1</span>
				</a></li>
				<li><a href="#">
					<span class="nav-symbol">✤</span>
					<span>Item 2</span>
				</a></li>
				<li><a href="#">
					<span class="nav-symbol"></span>
					<span>Item 3</span>
				</a></li>
			</ul>
		</li>
		<li><a href="#">
			<span class="nav-symbol"></span>
			<span>Item 3</span>
		</a></li>
	</ul>
</amp-sidebar>

Some noticable parts would be:

Back to Index


Table of Contents

“Table of Contents” navigation is the fundamental and fallback navigation rendering in Bissetii. It basically renders the entire list as a list table.

Enable Table of Contents (Sass)

Should any specific navigation bar is imported, “Table of Contents” will be included automatically as a fallback mode. Unless otherwise necessary, you can optionally, explictly include it by setting the following config to 1 before importing/using Bissetii Sass nav module:

$config-nav: 1

The Sass script responsible for rendering “Table of Contents” is located at: assets/css/bissetii/modules/nav/_Base.scss.

Deploy Table of Contents (HTML)

“Table of Contents” requires no class tag attached to <nav> tag. A simple <nav> tag is suffice.

<nav>
...
</nav>

Vanilla HTML Layout

A Basic table of contents structure would be:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<nav>
	<section>
		<header>
			<p>Menu Title</p>
		</header>
		<ul>
			<li><a href="#">
				<span class="nav-symbol">⌁</span>
				<span>Item 1</span>
			</a></li>
			<li><a href="#">
				<span class="nav-symbol">✤</span>
				<span>Item 2</span>
			</a></li>
			<li><a href="#">
				<span class="nav-symbol"></span>
				<span>Item 3</span>
			</a></li>
		</ul>
	</section>
</nav>

Some noticable highlights are:

Here is an example of fallback rendering:


AMP HTML Layout

AMP HTML for “table of contents” is the same as Vanilla HTML Layout. No AMP-specific codes are needed.

Back to Index