Skip to main content
EnergySageEnergySage
  • Sign in
Skip to main content
  • Home
  • Atoms
    • Color
    • Corners
    • Icons
    • Layout
    • Spacing
    • Typography
  • Molecules
    • Accordion
    • Badge
    • Breadcrumbs
    • Button
    • Card
    • Checkbox
    • Collapse
    • Data table
    • Data table simple
    • Dropdown select
    • File input
    • Form message
    • Menu bar
    • Mobile nav
    • Modal
    • Pagination
    • Popover
    • Progress
    • Progress circle
    • Radio button
    • Radio cards
    • Rating
    • Segmented control
    • Skeleton
    • Skip to content link
    • Slider
    • Sticky bar
    • Support
    • Tabs
    • Textarea
    • Text input
    • Toggle
    • Tooltip
    • Verification code
    • Video
    • View more
  • Organisms
    • Carousel
    • CTA banner
    • CTA card
    • Error page
    • File preview modal
    • Form
    • Nav CTA card
    • Reviews.io card carousel
    • Support card
    • Zip code form
  • Examples
    • Form with client-side validation
    • Form with server error
    • Reordering with motion
    • Site navigation
  1. Home
  2. /
  3. Examples
  4. /
  5. Site navigation

Site navigation

This page demonstrates how to use the mobile nav and menu bar inside of a sticky bar. It also shows the background behavior when the sticky bar is set to be transparent on desktop.

The mobile nav is displayed on xs, sm, md, and lg breakpoints. The menu bar is displayed on xl and xxl breakpoints.

The nav content will be different depending on whether or not the user is signed in. You can toggle signed in state below to see each variation.

test content for scrolling

test content for scrolling

test content for scrolling

test content for scrolling

test content for scrolling

test content for scrolling

test content for scrolling

test content for scrolling

test content for scrolling

test content for scrolling