Skip to main content
Navigation modules provide the structural elements for site navigation and global components like headers and footers in FreshJuice DEV.

​
Available Navigation Modules

FreshJuice includes 6 navigation modules:

​
Footers

​
Utility Modules

Module: global-scroll-to-top.moduleType: Global ModulePurpose: Floating button that allows users to quickly scroll back to the top of the page.Features:
  • Appears on scroll
  • Smooth scroll animation
  • Customizable position
  • Mobile-friendly
Use cases:
  • Long pages
  • Blog posts
  • Improved user experience
Available for: Landing pages, site pages, blog listings, blog postsNote: This is a global module that appears automatically on pages.

​
Module Comparison

ModuleTypePurposeBest For
Navigation BarStandardFull-featured navigationMain site navigation
Navigation Bar SimpleStandardMinimal navigationLanding pages
MenuStandardStandalone menuFooter/sidebar menus
Global FooterGlobalFull site footerStandard pages
Global Footer LPGlobalMinimal footerLanding pages
Scroll to TopGlobalScroll utilityLong content pages

​
Usage in Templates

​
Adding Navigation to a Template

<!DOCTYPE html>
<html>
<head>
  <!-- Head content -->
</head>
<body>
  
  {# Navigation Bar #}
  {% module "main_navigation"
    path="../modules/navigation-bar.module",
    label="Main Navigation"
  %}
  
  {# Main Content #}
  {% block body %}
    <!-- Page content -->
  {% endblock body %}
  
  {# Footer #}
  {% global_partial path="../partials/footer.html" %}
  
  {# Scroll to Top (included automatically if global) #}
  
</body>
</html>

{% dnd_area "header" %}
  {% dnd_module "site_navigation"
    path="../modules/navigation-bar.module",
    label="Site Navigation"
  %}
  {% end_dnd_module %}
{% end_dnd_area %}

​
Using Simple Navigation for Landing Pages

{% dnd_area "header" %}
  {% dnd_module "simple_nav"
    path="../modules/navigation-bar-simple.module",
    label="Simple Navigation"
  %}
  {% end_dnd_module %}
{% end_dnd_area %}

{# Content #}

{% global_partial path="../partials/footer-for-lp.html" %}

​
Global vs Standard Modules

Global Modules are special modules that are typically managed at the site level and included via partials. They maintain consistent branding and functionality across all pages.

​
Global Modules

  • Global Footer - global: true
  • Global Footer LP - global: true
  • Scroll to Top - global: true
Global modules are managed centrally and changes apply site-wide.

​
Standard Modules

  • Navigation Bar
  • Navigation Bar Simple
  • Menu
Standard modules can be customized per page or template.
Use the full Navigation Bar for standard pages with multiple menu items. Use Navigation Bar Simple for landing pages to reduce distractions.
Use the same navigation module across similar page types for a consistent user experience.
Use Global Footer for standard pages and Global Footer LP for landing pages where you want to minimize distractions.
The Scroll to Top module improves UX on pages with lots of content, especially blog posts.
Always test navigation modules on mobile devices to ensure the hamburger menu and mobile layouts work correctly.
Keep navigation menus focused with 5-7 main items. Use dropdown menus for additional pages.

​
Customizing Navigation

Navigation menus in FreshJuice are managed through HubSpot’s menu editor:
  1. Go to Marketing > Files and Templates > Design Tools
  2. Navigate to Menus
  3. Create or edit your menu
  4. Assign the menu to your navigation module

​
Styling Navigation

Navigation modules use Tailwind CSS and can be customized: 
/* module.css */
.navigation-bar {
  @apply bg-white shadow-md;
}

.nav-link {
  @apply px-4 py-2 hover:text-primary transition-colors;
}

​
Mobile Responsiveness

All navigation modules are mobile-responsive by default:
  • Hamburger menu for mobile devices
  • Touch-friendly navigation
  • Responsive breakpoints using Tailwind

​
Template Integration

​
Base Template with Navigation

{# templates/layouts/base.html #}
<!DOCTYPE html>
<html lang="{{ html_lang }}" dir="{{ html_lang_dir }}">
<head>
  {{ standard_header_includes }}
</head>
<body>
  
  {# Header with navigation #}
  {% block header %}
    {% global_partial path="../partials/header.html" %}
  {% endblock header %}
  
  {# Main content #}
  {% block body %}
  {% endblock body %}
  
  {# Footer #}
  {% block footer %}
    {% global_partial path="../partials/footer.html" %}
  {% endblock footer %}
  
  {{ standard_footer_includes }}
</body>
</html>

​
Header Partial

{# templates/partials/header.html #}
<header>
  {% module "main_navigation"
    path="../../modules/navigation-bar.module",
    label="Main Navigation"
  %}
</header>

Content Modules

Accordion, Button, Card, Tabs, and more

Templates

Learn about template structure and partials

Creating Modules

Build custom navigation modules

Styling Components

Customize navigation appearance

Build docs developers (and LLMs) love

Get started for freeTalk to us