fix(Navbar): add missing type for sticky bottom (#6726)

react-bootstrap · Dec 2, 2023 · 36d0b7a · 36d0b7a
1 parent a58a0cd
commit 36d0b7a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/Navbar.tsx b/src/Navbar.tsx
@@ -22,7 +22,7 @@ export interface NavbarProps
   expand?: boolean | string | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   bg?: string;
   fixed?: 'top' | 'bottom';
-  sticky?: 'top';
+  sticky?: 'top' | 'bottom';
   onToggle?: (expanded: boolean) => void;
   onSelect?: SelectCallback;
   collapseOnSelect?: boolean;
@@ -63,12 +63,10 @@ const propTypes = {
   fixed: PropTypes.oneOf(['top', 'bottom']),
 
   /**
-   * Position the navbar at the top of the viewport, but only after scrolling past it.
-   * A convenience prop for the `sticky-top` positioning class.
-   *
-   *  __Not supported in <= IE11 and other older browsers without a polyfill__
+   * Position the navbar at the top or bottom of the viewport, but only after scrolling past it.
+   * A convenience prop for the `sticky-*` positioning classes.
    */
-  sticky: PropTypes.oneOf(['top']),
+  sticky: PropTypes.oneOf(['top', 'bottom']),
 
   /**
    * Set a custom element for this component.

diff --git a/www/docs/components/navbar.mdx b/www/docs/components/navbar.mdx
@@ -41,6 +41,7 @@ likely require custom styling to work well.
 </CodeBlock>
 
 ## Forms
+
 Use `<Form inline>` and your various form controls within the Navbar.
 Align the contents as needed with utility classes.
 
@@ -99,13 +100,13 @@ viewports when your navbar is collapsed.
 
 You can use Bootstrap's <DocLink path="/utilities/position/">position utilities</DocLink> to
 place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or
-stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed
-navbars use `position: fixed`, meaning they’re pulled from the normal flow of the DOM and may
+stickied to the top (scrolls with the page until it reaches the top, then stays there), or
+stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there).
+
+Fixed navbars use `position: fixed`, meaning they’re pulled from the normal flow of the DOM and may
 require custom CSS (e.g., padding-top on the `<body>`) to prevent overlap with other elements.
-Also note that `.sticky-top` uses `position: sticky`, which
-[isn’t fully supported in every browser](https://caniuse.com/#feat=css-sticky).
 
-Since these positioning needs are so common for Navbars, we've added convenience props for them.
+Since these positioning needs are so common for navbars, we've added convenience props for them.
 
 ### Fixed top
 
@@ -125,6 +126,12 @@ Since these positioning needs are so common for Navbars, we've added convenience
 <Navbar sticky="top" />
 ```
 
+### Sticky bottom
+
+```jsx
+<Navbar sticky="bottom" />
+```
+
 ## Scrolling
 
 You can use the `navbarScroll` prop in a `<Nav>` to enable vertical scrolling within the toggleable