This module is available on these plans: PRO, Core, Free
View Live

SR Navigation 01

This module features a combination of Logos, Menus, CTAs, and optional Top bar. Supports up to 3 levels of navigation with an option for mega menu. 

SR Navigation 01 is a Global module ideally used for creating navigational links to pages, content and other resources on your website.

sr-navigation

Mega Menu 

This module has the option to display the menu as a Mega Menu. Turn it on under Settings -> Mega Menu

Menu Menu Setup

To setup the mega menu structure correctly follow this format

  • Item 1 (4 Columns)
    • Sub Link Column 1
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
    • Sub Link Column 2
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
    • Sub Link Column 3
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
    • Sub Link Column 4
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
  • Item 2 (3 Columns)
    • Sub Link Column 1
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
    • Sub Link Column 2
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
    • Sub Link Column 3
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
  • Item 3 (2 Columns)
    • Sub Link Column 1
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
    • Sub Link Column 2
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
  • Item 4 (Display as regular dropdown)
    • Menu Item 1
    • Menu Item 2
    • Menu Item 3
Image for reference

mega

 

View Mega Menu Live

Module Settings

Styles

Top bar GROUP
    Align TEXT ALIGNMENT
    Spacing SPACING
    Background GROUP
        Color COLOR
    Text GROUP
        Font FONT
Menu GROUP
    Menu ALignment HORIZONTAL ALIGNMENT
    Background GROUP
        Background COLOR
        Background on Scroll COLOR
    Shadow GROUP
        Shadow COLOR
        Shadow on Scroll COLOR
    Text GROUP
        Font FONT
        Color on Scroll COLOR
    Hover GROUP
        Color COLOR
    Active GROUP
        Color COLOR
    Drop Downs GROUP
        Text GROUP
            Font Color COLOR
        Background GROUP
            Color COLOR
            Border CHOICE

            None Solid Dotted Dashed Double

        Hover GROUP
            Font Color COLOR
            Background Color COLOR
        Active GROUP
            Font Color COLOR
            Background Color COLOR
Search GROUP
    Background GROUP
        Color COLOR
    Text GROUP
        Color COLOR
Mobile Menu GROUP
    Hamburger COLOR
    Previous Menu Link FONT

 

Settings GROUP
    Width CHOICE

    Container Full Width

    Fixed TOGGLE
    Hide on Scroll Down TOGGLE
    Mega Menu TOGGLE
    Mobile Breakpoint NUMBER
Top bar GROUP
    Type CHOICE

    None Announcement Menu

        Announcement GROUP
            Rich Text RICH TEXT
        Menu GROUP
            Menu MENU
            Social GROUP
                Icon REPEATER
                    Type CHOICE

                    Icon Image SVG

                    Link LINK
                Position CHOICE

                Left Center Right

Logo GROUP
    Link LINK
    Logo IMAGE
    Logo on Scroll IMAGE
    Use Separate Logo on Mobile TOGGLE
        Mobile Logo IMAGE
        Mobile Logo on Scroll IMAGE
Menu GROUP
    Menu MENU
    Max Levels NUMBER
Language Switcher GROUP

Note: By adding a language switcher you can allow your visitors to select their preferred language. Custom multi-language content will not be translated automatically. Learn More

    Enabled TOGGLE
    Display Mode CHOICE

    Localized PageLang Hybrid

    Position CHOICE

    Top Bar Main Menu

Buttton GROUP

   

Buttons

CTA Type Choice

Hubspot CTA Button Modal

CTA Style CHOICE

Primary Secondary Tertiary White Black Dark Light Success Info Warning Danger Outline Primary Outline Secondary Outline Tertiary Outline White Outline Black Outline Dark Outline Light Outline Success Outline Info Outline Warning Outline Danger Custom None

Button Text text
Link URL
CTA Size Choice

Small Default Large

Add Icon Toggle
Icon Position Choice
Left Right

Search GROUP

Note: Use the site search input module to help visitors search your site. Search results are displayed on your search results system page or by adding the search results module. Learn more

    Enabled TOGGLE
    Placeholder Text TEXT
    Use custom search results page TOGGLE
        search results page PAGE
    Search results include GROUP
        Website Pages TOGGLE
        Landing Pages TOGGLE
        Blog posts TOGGLE
Page Specific Settings REPEATER

Note: This setting allows you to define unique attributes like menus and background colors tailored to each page's requirements.

    Description GROUP
    Page REPEATER
        Page PAGE
    Page Type CHOICE

    Website Page Landing Page Blog Listing Blog Post

    Language TEXT
    Top Bar GROUP

    None Announcement Menu

        Announcement GROUP
            Rich Text RICH TEXT
        Menu GROUP
            Menu MENU
            Disable Icons TOGGLE
    Logo GROUP
        Link LINK
        Logo IMAGE
        Logo on Scroll IMAGE
        Mobile Logo IMAGE
        Mobile Logo on Scroll IMAGE
    Menu GROUP
        Disable Menu TOGGLE
        Menu MENU
        Mega Menu TOGGLE
        Background COLOR
        Color COLOR
        Shadow COLOR
   Button GROUP
        Disable Button TOGGLE

       

Buttons

CTA Type Choice

Hubspot CTA Button Modal

CTA Style CHOICE

Primary Secondary Tertiary White Black Dark Light Success Info Warning Danger Outline Primary Outline Secondary Outline Tertiary Outline White Outline Black Outline Dark Outline Light Outline Success Outline Info Outline Warning Outline Danger Custom None

Button Text text
Link URL
CTA Size Choice

Small Default Large

Add Icon Toggle
Icon Position Choice
Left Right

   Search GROUP
        Disable Search TOGGLE
        Background COLOR
        Color COLOR

 

See it Live

Sprocket Rocket Module Page- You can see the module used live!