Mammoth Templates logomammoth templates

Home / Components / Navigation

Video preview

Navbar & Footer Pack gives you the two components every site rebuilds, done properly. Ten navbar variants and eight footer variants ship as one stylesheet and one script, driven by data attributes, so you paste a snippet and it works. Everything is keyboard accessible (Escape closes, arrow keys move through menus, the drawer traps focus), respects reduced motion, and ships with light and dark themes plus a toggle.

All colours, radius and sizes are CSS variables. The demo page shows every variant live at desktop, tablet and mobile widths and exposes each as a copy-paste snippet. It is a front-end component kit, not a CMS: the newsletter form validates and fires an event for you to connect to your own provider.

Highlights

  • 10 navbar variants: mega menu, sticky shrink, off-canvas drawer, centered logo, sidebar, transparent hero, commerce with search, command-style, floating pill, announcement bar
  • 8 distinct footers: simple, columns, newsletter, app download, minimal, CTA, sitemap, contact + map
  • Drop-in component.css (~41 KB) and component.js (~20 KB), no dependencies
  • Data-attribute driven with custom events and a tiny JS API
  • Keyboard accessible: Escape, arrow keys, drawer focus trap, ARIA, reduced motion
  • Dark and light themes with toggle, system preference and CSS variables
  • Hash-routed live gallery with desktop/tablet/mobile preview and copy-paste snippets