Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Key Features
  • Customization Options
  • Usage

Was this helpful?

  1. Components

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

PreviousNav ItemNextNavbar Brand

Last updated 1 year ago

Was this helpful?

Key Features

  • Container Options: Supports fixed and fluid container types for different layout needs.

  • Placement Options: Includes placement configurations like default, fixed-top, fixed-bottom, and sticky-top.

  • Color Themes: Offers color themes such as light and dark for style customization.

  • Expandable Navbars: Configurable expansion settings for responsive design at breakpoints like sm, md, lg, xl.

  • Utility Class Integration: Allows for the addition of custom utility classes for further styling and functionality customization.

Customization Options

  • Flexible Container: Choose between a fixed-width or full-width container to match the layout of your site.

  • Navbar Placement: Customize the placement of the navbar to suit different design requirements.

  • Color Schemes: Select from light or dark color schemes to align with your site's theme.

  • Responsive Behavior: Set the navbar to expand at specific screen sizes for optimal responsiveness.

Usage

{% include 'radix:navbar' with {
  navbar_container_type: 'fluid',
  placement: 'sticky-top',
  navbar_theme: 'dark',
  navbar_expand: 'md',
  navbar_utility_classes: ['bg-light'],
  branding: branding_content,
  left: left_block_content,
  right: right_block_content
} %}
Bootstrap docs