feat(theme-classic): new 'html' type navbar item (#7058)

* feat(theme-classic): allow using html in dropdown items

* Fix tests

* Introduce HTML type for navbar item

* Update packages/docusaurus-theme-classic/src/theme/NavbarItem/HtmlNavbarItem.tsx

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

website/docs/api/themes/theme-configuration.md

@@ -312,6 +312,7 @@ Navbar dropdown items only accept the following **"link-like" item types**:
 - [Navbar doc link](#navbar-doc-link)
 - [Navbar docs version](#navbar-docs-version)
 - [Navbar doc sidebar](#navbar-doc-sidebar)
+- [Navbar with custom HTML](#navbar-with-custom-html)
 
 Note that the dropdown base item is a clickable link as well, so this item can receive any of the props of a [plain navbar link](#navbar-link).
 
@@ -621,6 +622,39 @@ module.exports = {
 };
 ```
 
+#### Navbar with custom HTML {#navbar-with-custom-html}
+
+You can also render your own HTML markup inside a navbar item using this navbar item type.
+
+<APITable name="navbar-html">
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `'html'` | **Required** | Sets the type of this item to a HTML element. |
+| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
+| `className` | `string` | `''` | Custom CSS class for this navbar item. |
+| `value` | `string` | `''` | Custom HTML to be rendered inside this navbar item. |
+
+</APITable>
+
+```js title="docusaurus.config.js"
+module.exports = {
+  themeConfig: {
+    navbar: {
+      items: [
+        // highlight-start
+        {
+          type: 'html',
+          position: 'right',
+          value: '<button>Give feedback</button>',
+        },
+        // highlight-end
+      ],
+    },
+  },
+};
+```
+
 ### Auto-hide sticky navbar {#auto-hide-sticky-navbar}
 
 You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up.