diff --git a/docs/components_page/components/button_group/radios.R b/docs/components_page/components/button_group/radios.R
index fb43bd65f..bb38526e7 100644
--- a/docs/components_page/components/button_group/radios.R
+++ b/docs/components_page/components/button_group/radios.R
@@ -6,7 +6,7 @@ button_group <- htmlDiv(
     dbcRadioItems(
       id = "radios",
       class_name = "btn-group",
-      input_class_name="btn-check",
+      input_class_name = "btn-check",
       label_class_name = "btn btn-outline-primary",
       label_checked_class_name = "active",
       options = list(
diff --git a/docs/components_page/components/input/selected_styles.R b/docs/components_page/components/input/selected_styles.R
index a65cbcdef..82d20a8e6 100644
--- a/docs/components_page/components/input/selected_styles.R
+++ b/docs/components_page/components/input/selected_styles.R
@@ -10,22 +10,22 @@ checklist <- htmlDiv(
         list(label = "Option 2", value = 2),
         list(label = "Option 3", value = 3)
       ),
-      label_checked_style=list("color" = "red"),
-      input_checked_style=list(
-          "backgroundColor" = "#fa7268",
-          "borderColor" = "#ea6258"
+      label_checked_style = list("color" = "red"),
+      input_checked_style = list(
+        "backgroundColor" = "#fa7268",
+        "borderColor" = "#ea6258"
       )
     ),
     htmlHr(),
     dbcRadioItems(
-      id="radio-selected-style",
+      id = "radio-selected-style",
       options = list(
         list(label = "Option 1", value = 1),
         list(label = "Option 2", value = 2),
         list(label = "Option 3", value = 3)
       ),
-      label_checked_class_name="text-success",
-      input_checked_class_name="border border-success bg-success"
+      label_checked_class_name = "text-success",
+      input_checked_class_name = "border border-success bg-success"
     )
   )
 )
diff --git a/docs/components_page/components/navbar.md b/docs/components_page/components/navbar.md
index 2f3f89981..665a0907c 100644
--- a/docs/components_page/components/navbar.md
+++ b/docs/components_page/components/navbar.md
@@ -17,7 +17,7 @@ The `NavbarSimple` will collapse on smaller screens, and add a toggle for reveal
 
 ## Navbar
 
-If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. We recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav).
+If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. From Bootstrap 5, all elements inside the `NavBar` should be contained within a [`Container`](/docs/components/layout). We also recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav).
 
 Here is an example of a custom navbar, see the `examples/` folder in the [GitHub repo](https://github.com/facultyai/dash-bootstrap-components/blob/main/examples/python/advanced-component-usage/navbars.py) for more.
 
@@ -30,4 +30,3 @@ Here is an example of a custom navbar, see the `examples/` folder in the [GitHub
 {{apidoc:src/components/nav/NavbarBrand.js}}
 
 {{apidoc:src/components/nav/NavbarToggler.js}}
-
diff --git a/docs/components_page/components/navbar/navbar.R b/docs/components_page/components/navbar/navbar.R
index 06aea7b00..c23fee51d 100644
--- a/docs/components_page/components/navbar/navbar.R
+++ b/docs/components_page/components/navbar/navbar.R
@@ -14,41 +14,37 @@ search_bar <- dbcRow(
       width = "auto"
     )
   ),
-  class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0",
+  class_name = "g-0 ms-auto flex-nowrap mt-3 mt-md-0",
   align = "center"
 )
 
 navbar <- dbcNavbar(
-  list(
-    htmlA(
-      # Use row and col to control vertical alignment of logo / brand
-      dbcRow(
-        list(
-          dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")),
-          dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2"))
+  dbcContainer(
+    list(
+      htmlA(
+        # Use row and col to control vertical alignment of logo / brand
+        dbcRow(
+          list(
+            dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")),
+            dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2"))
+          ),
+          align = "center",
+          class_name = "g-0"
         ),
-        align = "center",
-        class_name = "g-0"
-      ),
-      href = "https://plotly.com",
-      style = list("textDecoration" = "none")
-    ),
-    htmlDiv(
-      list(
-        dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0),
-        dbcCollapse(
-          search_bar,
-          id = "navbar-collapse",
-          is_open = FALSE,
-          navbar = TRUE
-        )
+        href = "https://plotly.com",
+        style = list("textDecoration" = "none")
       ),
-      class_name = "ms-auto"
+      dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0),
+      dbcCollapse(
+        search_bar,
+        id = "navbar-collapse",
+        is_open = FALSE,
+        navbar = TRUE
+      )
     )
   ),
   color = "dark",
-  dark = TRUE,
-  class_name = "py-2 px-3"
+  dark = TRUE
 )
 
 
diff --git a/docs/components_page/components/navbar/navbar.jl b/docs/components_page/components/navbar/navbar.jl
index e72b1ec70..427b48498 100644
--- a/docs/components_page/components/navbar/navbar.jl
+++ b/docs/components_page/components/navbar/navbar.jl
@@ -10,12 +10,12 @@ search_bar = dbc_row(
             width = "auto",
         ),
     ],
-    class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0",
+    class_name = "g-0 ms-auto flex-nowrap mt-3 mt-md-0",
     align = "center",
 );
 
 navbar = dbc_navbar(
-    [
+    dbc_container([
         html_a(
             # Use row and col to control vertical alignment of logo / brand
             dbc_row(
@@ -29,22 +29,11 @@ navbar = dbc_navbar(
             href = "https://plotly.com",
             style = Dict("textDecoration" => "none"),
         ),
-        html_div(
-            [
-                dbc_navbartoggler(id = "navbar-toggler", n_clicks = 0),
-                dbc_collapse(
-                    search_bar,
-                    id = "navbar-collapse",
-                    is_open = false,
-                    navbar = true,
-                ),
-            ],
-            class_name = "ms-auto",
-        ),
-    ],
+        dbc_navbartoggler(id = "navbar-toggler", n_clicks = 0),
+        dbc_collapse(search_bar, id = "navbar-collapse", is_open = false, navbar = true),
+    ]),
     color = "dark",
     dark = true,
-    class_name = "py-2 px-3",
 )
 
 
diff --git a/docs/components_page/components/navbar/navbar.py b/docs/components_page/components/navbar/navbar.py
index 1bc12acfd..699623f97 100644
--- a/docs/components_page/components/navbar/navbar.py
+++ b/docs/components_page/components/navbar/navbar.py
@@ -15,41 +15,37 @@
             width="auto",
         ),
     ],
-    class_name="ms-auto flex-nowrap mt-3 mt-md-0 g-0",
+    class_name="g-0 ms-auto flex-nowrap mt-3 mt-md-0",
     align="center",
 )
 
 navbar = dbc.Navbar(
-    [
-        html.A(
-            # Use row and col to control vertical alignment of logo / brand
-            dbc.Row(
-                [
-                    dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
-                    dbc.Col(dbc.NavbarBrand("Navbar", class_name="ms-2")),
-                ],
-                align="center",
-                class_name="g-0",
-            ),
-            href="https://plotly.com",
-            style={"textDecoration": "none"},
-        ),
-        html.Div(
-            [
-                dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
-                dbc.Collapse(
-                    search_bar,
-                    id="navbar-collapse",
-                    is_open=False,
-                    navbar=True,
+    dbc.Container(
+        [
+            html.A(
+                # Use row and col to control vertical alignment of logo / brand
+                dbc.Row(
+                    [
+                        dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
+                        dbc.Col(dbc.NavbarBrand("Navbar", class_name="ms-2")),
+                    ],
+                    align="center",
+                    class_name="g-0",
                 ),
-            ],
-            class_name="ms-auto",
-        ),
-    ],
+                href="https://plotly.com",
+                style={"textDecoration": "none"},
+            ),
+            dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
+            dbc.Collapse(
+                search_bar,
+                id="navbar-collapse",
+                is_open=False,
+                navbar=True,
+            ),
+        ]
+    ),
     color="dark",
     dark=True,
-    class_name="py-2 px-3",
 )
 
 
diff --git a/examples/python/advanced-component-usage/navbars.py b/examples/python/advanced-component-usage/navbars.py
index 2f9549693..e4cfb1ff5 100644
--- a/examples/python/advanced-component-usage/navbars.py
+++ b/examples/python/advanced-component-usage/navbars.py
@@ -64,37 +64,36 @@
 
 # this example that adds a logo to the navbar brand
 logo = dbc.Navbar(
-    [
-        html.A(
-            # Use row and col to control vertical alignment of logo / brand
-            dbc.Row(
-                [
-                    dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
-                    dbc.Col(dbc.NavbarBrand("Logo", class_name="ms-2")),
-                ],
-                align="center",
-                class_name="g-0",
+    dbc.Container(
+        [
+            html.A(
+                # Use row and col to control vertical alignment of logo / brand
+                dbc.Row(
+                    [
+                        dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
+                        dbc.Col(dbc.NavbarBrand("Logo", class_name="ms-2")),
+                    ],
+                    align="center",
+                    class_name="g-0",
+                ),
+                href="https://plotly.com",
+                style={"textDecoration": "none"},
             ),
-            href="https://plotly.com",
-            style={"textDecoration": "none"},
-        ),
-        html.Div(
-            [
-                dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0),
-                dbc.Collapse(
-                    dbc.Nav(
-                        [nav_item, dropdown], class_name="ms-auto", navbar=True
-                    ),
-                    id="navbar-collapse2",
+            dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0),
+            dbc.Collapse(
+                dbc.Nav(
+                    [nav_item, dropdown],
+                    class_name="ms-auto",
                     navbar=True,
                 ),
-            ],
-            className="ms-auto",
-        ),
-    ],
+                id="navbar-collapse2",
+                navbar=True,
+            ),
+        ],
+    ),
     color="dark",
     dark=True,
-    class_name="py-2 px-3 mb-5",
+    class_name="mb-5",
 )
 
 # this example has a search bar and button instead of navitems / dropdowns
@@ -136,17 +135,21 @@
 
 # custom navbar based on https://getbootstrap.com/docs/4.1/examples/dashboard/
 dashboard = dbc.Navbar(
-    [
-        dbc.Col(dbc.NavbarBrand("Dashboard", href="#"), sm=3, md=2),
-        dbc.Col(dbc.Input(type="search", placeholder="Search here")),
-        dbc.Col(
-            dbc.Nav(dbc.NavItem(dbc.NavLink("Sign out")), navbar=True),
-            width="auto",
-        ),
-    ],
+    dbc.Container(
+        [
+            dbc.Col(dbc.NavbarBrand("Dashboard", href="#"), sm=3, md=2),
+            dbc.Col(dbc.Input(type="search", placeholder="Search here")),
+            dbc.Col(
+                dbc.Nav(
+                    dbc.Container(dbc.NavItem(dbc.NavLink("Sign out"))),
+                    navbar=True,
+                ),
+                width="auto",
+            ),
+        ],
+    ),
     color="dark",
     dark=True,
-    class_name="py-2 px-3",
 )
 
 app.layout = html.Div(
diff --git a/src/components/collapse/Collapse.js b/src/components/collapse/Collapse.js
index 10f733714..12d6f4251 100644
--- a/src/components/collapse/Collapse.js
+++ b/src/components/collapse/Collapse.js
@@ -2,14 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBCollapse from 'react-bootstrap/Collapse';
-import RBNavbarCollapse from 'react-bootstrap/NavbarCollapse';
 
 /**
  * Hide or show content with a vertical collapsing animation. Visibility of the
  * children is controlled by the `is_open` prop which can be targetted by
  * callbacks.
  */
-const Collapse = props => {
+const Collapse = React.forwardRef((props, ref) => {
   const {
     children,
     is_open,
@@ -21,10 +20,8 @@ const Collapse = props => {
     ...otherProps
   } = props;
 
-  const Component = navbar ? RBNavbarCollapse : RBCollapse;
-
   return (
-    <Component
+    <RBCollapse
       in={is_open}
       as={tag}
       className={class_name || className}
@@ -33,10 +30,12 @@ const Collapse = props => {
         (loading_state && loading_state.is_loading) || undefined
       }
     >
-      <div>{children}</div>
-    </Component>
+      <div ref={ref} className={navbar && 'navbar-collapse'}>
+        {children}
+      </div>
+    </RBCollapse>
   );
-};
+});
 
 Collapse.propTypes = {
   /**
diff --git a/src/components/fade/Fade.js b/src/components/fade/Fade.js
index e831cac82..4d2d0d5ee 100644
--- a/src/components/fade/Fade.js
+++ b/src/components/fade/Fade.js
@@ -7,7 +7,7 @@ import RBFade from 'react-bootstrap/Fade';
  * Hide or show content with a fading animation. Visibility of the children is
  * controlled by the `is_open` prop which can be targetted by callbacks.
  */
-const Fade = props => {
+const Fade = React.forwardRef((props, ref) => {
   const {
     children,
     is_in,
@@ -35,10 +35,10 @@ const Fade = props => {
         (loading_state && loading_state.is_loading) || undefined
       }
     >
-      <div>{children}</div>
+      <div ref={ref}>{children}</div>
     </RBFade>
   );
-};
+});
 
 Fade.propTypes = {
   /**