Wagtail Wagtail + CodeRed Extensions
  • Getting Started
    • Installation
    • Customize the design of your website
    • Tutorial Part 1: Site Name, Logo, and Basics
    • Tutorial Part 2: Adding Content
    • Tutorial Part 3: Navbar & Footer
    • Tutorial Part 4: Creating a Blog
    • Tutorial Part 5: Web Page
    • Tutorial Part 6: Create Categories with Classifiers
    • Tutorial Part 7: Forms & Contact Pages
    • Tutorial Part 8: SEO Metadata
    • Tutorial Part 9: Images
    • Tutorial Part 10: Password-Protected Pages
  • Advanced Tutorial
    • Customizing HTML/CSS in Templates
    • Custom Page Types
  • Features
    • Blocks
      • Content Blocks
        • Button Block
        • Card Block
        • Carousel Block
        • Download Block
        • Embed Media Block
        • Google Map Block
        • HTML Block
        • Image Block
        • Image Gallery Block
        • Image Link
        • Latest Pages Block
        • Modal Block
        • Page Preview Block
        • Price List Block
        • Reusable Content Block
        • Quote Block
        • Table Block
        • Text Block
      • Layout Blocks
        • Card Grid Block
        • Column Block
        • Hero Block
        • Responsive Grid Row Block
    • Import/Export
    • Mailchimp Integration
    • Page Types
      • Article Pages
      • Event Pages
      • Form Pages
      • Location Pages
      • Stream Forms
      • Web Pages
    • Searching
    • Snippets
      • Carousels
      • Classifiers
      • Content Walls
      • Footers
      • Navigation Bars
      • Reusable Content
  • How-To Guides
    • 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
  • 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

Get Pro Support
This project is commercially supported 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.

← 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
  • Wagtail Hosting by CodeRed
  • Wagtail CRX on GitHub
  • About CodeRed

Wagtail Sphinx Theme 5.1.1

© Copyright 2018–2022, CodeRed LLC