Page Sub Menu

Page Sub-Menu

The page menu (#page-menu) is a secondary navigation bar, typically placed just below the main header. It is ideal for product pages, long articles, or landing pages where you want in-page section links plus a call-to-action. It supports its own sticky behaviour and, on one-page sites, smooth scrolling.

Basic Markup

<div id="page-menu">
	<div id="page-menu-wrap" class="not-dark">
		<div class="container">
			<div class="page-menu-row py-3">

				<div class="page-menu-title fw-medium me-5">iPhone 13</div>

				<nav class="page-menu-nav">
					<ul class="page-menu-container">
						<li class="page-menu-item current"><a href="#"><div>Overview</div></a></li>
						<li class="page-menu-item"><a href="#"><div>Features</div></a></li>
						<li class="page-menu-item"><a href="#"><div>Gallery</div></a></li>
						<li class="page-menu-item"><a href="#"><div>Compare</div></a></li>
					</ul>
				</nav>

				<div class="ms-auto me-2 me-lg-0 hstack">
					<a href="#" class="button rounded-pill m-0">Buy Now</a>
				</div>

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

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

Page Menu Classes

Class / ID	Purpose
#page-menu	The page menu wrapper.
#page-menu-wrap	Inner wrapper (add not-dark for a light bar).
page-menu-row	Flex row holding the title, nav, and CTA.
page-menu-title	The label shown on the left.
page-menu-nav	The <nav> around the link list.
page-menu-container	The <ul> list of items.
page-menu-item	A single link item. Add current for the active one.
#page-menu-trigger	The mobile toggle for the page menu.

One-Page Smooth Scroll

On one-page layouts, add one-page-menu to the container and point each link's data-href at a section. Configure easing, speed, and offset with data attributes:

<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-contact"><div>Contact</div></a></li>
	</ul>
</nav>

Page Menu Data Attributes

Attribute	Example	Purpose
data-easing	easeInOutExpo	Scroll easing function.
data-speed	1250	Scroll animation duration (ms).
data-offset	65	Pixels of offset from the top when scrolling to a section (accounts for a sticky header).
data-active-class	active / current	Class applied to the active item as you scroll.
data-mobile-sticky	true	Keeps the page menu sticky on mobile.
data-sticky-shrink	true / false	Controls shrink of the page menu when sticky.
data-pagemenu-breakpoint	number	Breakpoint at which the page menu collapses to its trigger.

Non-Sticky Page Menu

<div id="page-menu" class="no-sticky"> ... </div>

Notes and Tips

• Each link label is wrapped in a <div> inside the <a>, matching the primary menu pattern.
• The CTA area uses the Canvas .button shortcode (for example button rounded-pill m-0), not a Bootstrap .btn.
• Use data-offset equal to your header height so scrolled sections are not hidden under the sticky header.
• Add not-dark to #page-menu-wrap to keep a light bar even when the surrounding page is dark.