Dots Sub Menu

Dots Sub-Menu

The dots menu is a compact, collapsed version of the page menu (#page-menu). It shows as a small dotted pill fixed to the side of the screen and expands to reveal the section labels on hover. It is a popular choice for one-page portfolio and landing layouts.

Enabling the Dots Menu

Add dots-menu to #page-menu. The rest of the page menu markup stays the same:

<div id="page-menu" class="dots-menu dots-menu-border">
	<div id="page-menu-wrap">
		<div class="container">
			<div class="page-menu-row">

				<div class="page-menu-title">Explore <span>CANVAS</span></div>

				<nav class="page-menu-nav">
					<ul class="page-menu-container one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">
						<li class="page-menu-item"><a href="#" data-href="#wrapper"><div>Start</div></a></li>
						<li class="page-menu-item"><a href="#" data-href="#section-about"><div>About</div></a></li>
						<li class="page-menu-item"><a href="#" data-href="#section-works"><div>Work</div></a></li>
						<li class="page-menu-item"><a href="#" data-href="#section-services"><div>Services</div></a></li>
						<li class="page-menu-item"><a href="#" data-href="#section-blog"><div>Blog</div></a></li>
						<li class="page-menu-item"><a href="#" data-href="#section-contact"><div>Contact</div></a></li>
					</ul>
				</nav>

				<div id="page-menu-trigger"><i class="bi-list"></i></div>

			</div>
		</div>
	</div>
</div><!-- #page-menu end -->

Dots Menu Classes

Class	Effect
dots-menu	Collapses the page menu into a small dotted pill that expands on hover.
dots-menu-border	Adds a border variant to the dots menu.
pos-left	Positions the dots menu on the left side (default is right).

Left-Positioned Dots Menu

<div id="page-menu" class="dots-menu pos-left"> ... </div>

How It Works (CSS)

The collapsed pill is narrow and expands on hover:

#page-menu.dots-menu {
	background: #fff;
	box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 15%);
	border-radius: 7px;
	transition: all .2s ease-in-out;
	width: 30px;
	overflow: hidden;
}

#page-menu.dots-menu:hover {
	width: 150px;
}

.dots-menu .page-menu-item {
	margin: 13px 0;
}

Notes and Tips

• The dots menu is the same component as the page sub-menu, so all one-page-menu data attributes (data-easing, data-speed, data-offset) apply.
• Each page-menu-item renders as a dot when collapsed; its label appears on hover.
• Combine dots-menu with one-page-menu and data-href targets for smooth-scrolling section navigation on single-page sites.
• Use pos-left for layouts where the right edge is busy (for example a side widget or CTA).