Skip to content
Wagtail Wagtail + CodeRed Extensions
  • Getting Started
    • Installation
    • Customize the design of your website
    • About The Tutorial
    • Tutorial Part 1: Site Name, Logo, and Global Colors
    • Tutorial Part 2: Adding Pages
    • Tutorial Part 3: Adding Content, Custom CSS
    • Tutorial Part 4: Navbar & Footer
    • Tutorial Part 5: Creating a Blog
    • Tutorial Part 6: Web Page and Google Map
    • Tutorial Part 7: Create Categories with Classifiers
    • Tutorial Part 8: Forms & Contact Pages
    • Tutorial Part 9: SEO Metadata
    • Tutorial Part 10: Images
    • Tutorial Part 11: Password-Protected Pages
  • Advanced Tutorial
    • Customizing Templates & CSS
    • Custom Page Types
  • Features
    • Content Blocks
      • Accordion Block
      • Button Block
      • Card Block
      • Carousel Block
      • Download Block
      • Embed Media Block
      • Film Strip Block
      • Google Map Block
      • HTML Block
      • Image Block
      • Image Gallery Block
      • Image Link
      • Latest Pages Block
      • Modal Block
      • Page Preview Block
      • Price List Block
      • Quote Block
      • Reusable Content Block
      • Table Block
      • Text Block
    • Layout Blocks
      • Card Grid Block
      • Column Block
      • Hero Block
      • Responsive Grid Row Block
      • HTML Block
    • Page Types
      • Article Pages
      • Event Pages
      • Form Pages
      • Location Pages
      • Stream Forms
      • Web Pages
    • Snippets
      • Accordions
      • Carousels
      • Classifiers
      • Content Walls
      • Film Strip
      • Footers
      • Navigation Bars
      • Reusable Content
    • Related Pages
    • Searching
    • Spam Protection
    • Import Pages
    • Mailchimp Integration
  • How-To Guides
    • Best Practices for Images
    • Customize Navbar and Footer
    • Add Tracking Scripts
    • Open External Links in New Tab
    • Translation & Multi-Language Support
    • Run Wagtail CRX with Docker
    • Using a Custom Image Model in Wagtail CRX
    • Convert Existing Site to Use a Custom Image Model
  • Technical Reference
    • Wagtail CRX Django Settings
  • Contributing
  • Deploying & hosting
  • Release Notes
    • v5.0.1 release notes
    • v5.0.0 release notes
    • v4.1.1 release notes
    • v4.1.0 release notes
    • v4.0.1 release notes
    • v4.0.0 release notes
    • v3.0.4 release notes
    • v3.0.3 release notes
    • v3.0.2 release notes
    • v3.0.1 release notes
    • v3.0.0 release notes
    • v2.1.4 release notes
    • v2.1.3 release notes
    • v2.1.2 release notes
    • v2.1.1 release notes
    • v2.1.0 release notes
    • v2.0.0 release notes
    • v1.0.3 release notes
    • v1.0.2 release notes
    • v1.0.1 release notes
    • v1.0.0 release notes
    • v0.25.2 release notes
    • v0.25.1 release notes
    • v0.25.0 release notes
    • v0.24.1 release notes
    • v0.24.0 release notes
    • v0.23.1 release notes
    • v0.23.0 release notes
    • v0.22.3 release notes
    • v0.22.2 release notes
    • v0.22.1 release notes
    • v0.22.0 release notes
    • v0.21.1 release notes
    • v0.21.0 release notes
    • v0.20.0 release notes
    • v0.19.1 release notes
    • v0.19.0 release notes
    • v0.18.2 release notes
    • v0.18.1 release notes
    • v0.18.0 release notes
    • v0.17.0 release notes
    • v0.16.3 release notes
    • v0.16.2 release notes
    • v0.16.1 release notes
    • v0.16.0 release notes
    • v0.15.2 release notes
    • v0.15.1 release notes
    • v0.15.0 release notes
    • v0.14.1 release notes
    • v0.14.0 release notes
    • v0.13.3 release notes
    • v0.13.2 release notes
    • v0.13.1 release notes
    • v0.13.0 release notes
    • v0.12.1 release notes
    • v0.12.0 release notes
    • v0.11.0 release notes
    • v0.10.0 release notes
    • v0.9.1 release notes
    • v0.9.0 release notes
Wagtail Hosting by CodeRed
  1. Docs
  2. Features
  3. Snippets
  4. Navigation Bars
Edit on GitHub View source

Navigation Bars¶

A representation of a navigation bar that sits at the top of your pages.

Usage¶

You define your content walls in the Snippets > Navigation Bars section of the admin. Once defined, your navigation bars will render on your page, stacked on top of each other.

Fields¶

Name: A unique name for your footer. It can be anything, it is just used as a personal reference to easily tell them apart. Custom CSS class: If you need to add a specific css class for this footer, add it here. Custom ID: If you need to add a specific ID for this footer, add it here. Navigation Links: A list of links to use for the navigation bar.

Navigation Links¶

Navigation links are a streamfield that allows you to craft different types of links in your navigation bar. All of these link types have the following fields: Display text: The text you want to use for the link. This is not necessary if you’re using an Image as the link. Image: The image you want to use for the link. This is optional and only really used if you need some special image to be used as the link, something like a paypal donate button. Sub-links: Optional field to determine any dropdown links attached to this link.

Page Link With Sub-Links¶

Page: The page on your site that you want to link to. Show child pages: Toggle to determine whether this link should automatically generate a dropdown that lists the Page children.

External Link With Sub-Links¶

URL: The URL you want to link to.

Document Link With Sub-Links¶

Document: The document you want to link to that will be downloaded.

Site Navbars¶

In Settings > CRX Settings, select which Navbars you want to display on your site under the Site Navbars section.

← Footers Reusable Content  →

Page contents

  • Navigation Bars
    • Usage
    • Fields
    • Navigation Links
      • Page Link With Sub-Links
      • External Link With Sub-Links
      • Document Link With Sub-Links
    • Site Navbars
  • Wagtail Hosting by CodeRed
  • Wagtail CRX on GitHub
  • About CodeRed
© Copyright 2018–2025, CodeRed LLC
Created using Sphinx Wagtail Theme 6.5.0 and Sphinx 8.2.3