The NavBar component.

Due to the massive amount of permutations possible in NavBar, this component focuses on the two main outer wrapping features of setting up a NavBar.

1. The NavBar itself, with coloring etc
2. The inner collapsible component NavBar.Collapse

Using the outer without the inner is ok, you cannot use the inner without the outer.

The component DropDown has a property that enables it to be used in a NavBar. This is the wrapper property and can be set to "nav_item". Please refer to the examples for usage examples.

https://getbootstrap.com/docs/5.0/components/navbar/

Properties

• id :string - Id, must be set if you want to manually put a collapsible button somewhere else than inside the current NavBar. For example when using a sidebar. Please look at the examples to see how to use to set up a sidebar. .
• color_type :string, default: "light", values: ~w(light dark) - Color type of navbar, this essentially means if the menu items etc are colored to match a dark or light background. If you plan to use a dark bg_color you should be doing color_type=dark as well so that menu items etc show lightened up. This defaults to light. .
• bg_color :string, default: "light", values: @colors - Background color of navbar.
• nav_size :string, values: @sizes -- ["fluid"], default: "lg" - Nav size.
• container_size :string, values: @sizes, default: "fluid" - Container size, defaults to fluid.
• container_class :css_class, default: [] - Class to propagate to inner container.
• placement :string, values: ~w(fixed_top fixed_bottom sticky_top) - Placement? Not set defaults See: https://getbootstrap.com/docs/5.0/components/navbar/?#placement.
• shadow :boolean - Shadow.
• style :string - Any custom style you want to add to navbar.
• sidebar :boolean - Is this sidebar Nav? Use NavBar.SidebarItemGroup and NavBar.SidebarItem to populate if so. .
• sidebar_collapse :boolean - Sidebar collapse. This prop MUST be used with a custom NavBar.Collapse placed .
• class :css_class, default: [] - Any classes to put on the nav.
• collapsible :boolean, default: true - Wrap content in collapsible and add collapsing button.
• collapsible_id :string, default: "navbar-bootstrap-collapsible-default-id" - Optional collapsible ID if you need to override. You need to set this if you intend to use multiple navbars with collapse on the same page, as the collapser code uses HTML ID to identify what to collapse / uncollapse. .
• collapsible_scrollable :boolean - Should navbar be scrollable in collapsed state? See: https://getbootstrap.com/docs/5.0/components/navbar/?#scrolling .
• collapsible_aria_label :string - Aria label for collapsible button.

Slots

• brand
• default