Skip to content
  • Docs
  • Components
  • Blog
  • Releases

Site Navigation

A minimal responsive site navigation.

Site Navigation

Open in New Window

Getting Started

  • Introduction
  • How to Use
  • Changelog

Components

  • Accordion Card
  • Accordion List
  • Alert
  • Auth Form
  • Breadcrumb List
  • Container
  • Cookie Consent
  • Invoice
  • Pagination
  • Post Author
  • Post Card
  • Preloader
  • Site Navigation
  • Skip Link
  • Theme Switcher

Sections

  • Feature
  • Gallery
  • Post Content
  • Post Heading
  • Post List
  • Site Footer
  • Site Header

Pages

  • Auth
  • Post

On this page

  1. Technical Details
  2. Resources

The site navigation component is a simple hamburger toggle button on mobile controlled by the aria-expanded attribute.

Technical Details

  • It uses aria-expanded attribute to control the state.
  • The script uses matchMedia to check the viewport width.

Resources

  • Marking elements expandable using aria-expanded
  • Window.matchMedia()
  • breakpoint
PreviousPreloaderNextSkip Link

Getting Started

  • Introduction
  • Installation
  • Structure and Code
  • Sass

Elements

  • Typography
  • Tables
  • Buttons
  • Forms

More From Us

  • Services
  • Pine - A web development blog
  • Root - An admin package for Laravel
  • Bite-Sized Accessibility

Code is licensed under MIT, docs is CC BY 4.0. - Version 1.2.1 - Privacy Policy