`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
Sidebar
Table of Contents

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.

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

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:

[1] - Ensure you apply Sidebar class tag to the <nav> HTML tag.
[2] - Site title for always appearing display. You should use <p> tag to avoid <h1> SEO conflicting usage.
[5-10] - Use of checkbox input and labels for toggling. This is the trigger point for open/close sidebar. You should supply an UNIQUEID (e.g. ea1231adv) for it.
[11,17] - Use of images for rendering button icons. There should be 1 for open with class tag (navbar-button-open) and 1 for closing with class tag (navbar-button-close). Both images must be the children for the corresponding open/close toggling <label>.
[24] - Create corresponding shade <label> for mobile user experience. This is for closing the sidebar when user presses the background instead of the toggling button.
[28] - The body of the sidebar. Use <section> tag.
[29] - Menu title when the drawer is opened. use <p> tag for text.
[32] - Main menu listing. sidebar-mainmenu class tag must be applied.
[34] - Bullet inclusion. nav-symbol class tag must be applied. Leave it empty if unused.
[35] - List item text.
[42,45] - Optional submenu toggling. It uses the same concept as the main menu. Reserved for future nested sidebar development. Likewise, each sub-menu must have its own UNIQUEID to avoid conflicting toggling.
[52-53] - Sub-menu example. The list must have submenu class tag.

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:

[1] - Ensure you apply Sidebar class tag to the <nav> HTML tag.
[2] - Site title for always appearing display. You should use <p> tag to avoid <h1> SEO conflicting usage.
[5-7] - Use of button and AMP built-in toggle function. This is the trigger point for opening sidebar. You should supply an UNIQUEID (e.g. ea1231adv) for it alongside its on= trigger.
[8] - Use of image for rendering menu icon. The image must use <amp-img> HTML tag and it must contain the navbar-button-open class tag.
[16] - The body of the sidebar. Use <amp-sidebar> tag with id=UNIQUEID, layout="nodisplay", and side="left".
[20] - Use of image for rendering close icon. The image must use <amp-img> HTML tag and it must contain the navbar-button-close class tag.
[27] - Menu title when the drawer is opened. use <p> tag for text.
[30] - Main menu listing. sidebar-mainmenu class tag must be applied.
[32] - Bullet inclusion. nav-symbol class tag must be applied. Leave it empty if unused.
[33] - List item text.
[40,43] - Optional submenu toggling. It uses the same concept as the main menu. Reserved for future nested sidebar development. Likewise, each sub-menu must have its own UNIQUEID to avoid conflicting toggling.
[50-51] - Sub-menu example. The list must have submenu class tag.

Back to Index

“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:

[1] - Ensure you apply Sidebar class tag to the <nav> HTML tag.
[2] - <section> tag to ensure fallback compatibilities from other navbar types.
[3] - Site title for always appearing display. You should use <p> tag to avoid <h1> SEO conflicting usage.
[6] - Main menu listing. no class tag is needed.
[8] - Bullet inclusion. nav-symbol class tag must be applied. Leave it empty if unused.
[9] - List item text.

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

`Navbar` Component

Javascript Parts

Sass Styling Parts

Changing Bullets

Version `v1.12.0` Onwards

Version `v1.11.0` and Below

HTML Parts

Basic HTML Layouts

Navbar First, First Content Next

Tagging: class for CSS

Checkbox Input Toggle

There Is Always A Fallback Mode

Sidebar

Enable Sidebar (Sass)

Deploy Sidebar (HTML)

Vanilla HTML Layout

AMP HTML Layout

Table of Contents

Enable Table of Contents (Sass)

Deploy Table of Contents (HTML)

Vanilla HTML Layout

AMP HTML Layout

Navbar Component

Javascript Parts

Sass Styling Parts

Changing Bullets

Version v1.12.0 Onwards

Version v1.11.0 and Below

HTML Parts

Basic HTML Layouts

Navbar First, First Content Next

Tagging: class for CSS

Checkbox Input Toggle

There Is Always A Fallback Mode

Sidebar

Enable Sidebar (Sass)

Deploy Sidebar (HTML)

Vanilla HTML Layout

AMP HTML Layout

Table of Contents

Enable Table of Contents (Sass)

Deploy Table of Contents (HTML)

Vanilla HTML Layout

AMP HTML Layout

`Navbar` Component

Version `v1.12.0` Onwards

Version `v1.11.0` and Below