Overview

The mobile menu system consists of two components that work together to provide responsive navigation on smaller screens.

Resize your browser to a mobile width to see these components in action.

MobileMenuToggle

A hamburger button that toggles the sidebar visibility on mobile devices.

Props

Prop	Type	Default	Description
label	string	"Menu"	Accessible label for the toggle button

Features

• Renders a hamburger icon (three bars) that transitions to a close icon (X)
• Manages expanded state internally with useStore
• Sets aria-expanded for accessibility
• Hidden on medium+ screens via .md:sl-hidden
• Hidden in print via .print:hidden

MobileMenuFooter

A flex container that appears at the bottom of the mobile sidebar. It holds the theme selector, social icons, and language picker.

Props

The MobileMenuFooter uses a slot pattern — it accepts children via a default slot.

Features

• Wraps content in a .mobile-preferences flex container
• Automatically populated by the Page component with:
  • ThemeSelect for theme switching
  • SocialIcons for social links
• Only visible when the mobile menu is open

How They Connect

1. User taps the MobileMenuToggle button
2. The sidebar panel becomes visible (controlled by PageFrame)
3. At the bottom of the sidebar, MobileMenuFooter shows preferences
4. Tapping the toggle again (now showing X) closes the sidebar