feat(content-docs): sidebar item type "html" for rendering pure markup (#6519)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

website/docs/guides/docs/sidebar/items.md

@@ -11,6 +11,7 @@ We have introduced three types of item types in the example in the previous sect
 - **[Link](#sidebar-item-link)**: link to any internal or external page
 - **[Category](#sidebar-item-category)**: creates a dropdown of sidebar items
 - **[Autogenerated](autogenerated.md)**: generate a sidebar slice automatically
+- **[HTML](#sidebar-item-html)**: renders pure HTML in the item's position
 - **[\*Ref](multiple-sidebars.md#sidebar-item-ref)**: link to a doc page, without making the item take part in navigation generation
 
 ## Doc: link to a doc {#sidebar-item-doc}
@@ -160,6 +161,55 @@ module.exports = {
 
 :::
 
+## HTML: render custom markup {#sidebar-item-html}
+
+Use the `html` type to render custom HTML within the item's `<li>` tag.
+
+This can be useful for inserting custom items such as dividers, section titles, ads, and images.
+
+```ts
+type SidebarItemHtml = {
+  type: 'html';
+  value: string;
+  defaultStyle?: boolean; // Use default menu item styles
+  className?: string;
+};
+```
+
+Example:
+
+```js title="sidebars.js"
+module.exports = {
+  myHtmlSidebar: [
+    // highlight-start
+    {
+      type: 'html',
+      value: '<img src="sponsor.png" alt="Sponsor" />', // The HTML to be rendered
+      defaultStyle: true, // Use the default menu item styling
+    },
+    // highlight-end
+  ],
+};
+```
+
+:::tip
+
+The menu item is already wrapped in an `<li>` tag, so if your custom item is simple, such as a title, just supply a string as the value and use the `className` property to style it:
+
+```js title="sidebars.js"
+module.exports = {
+  myHtmlSidebar: [
+    {
+      type: 'html',
+      value: 'Core concepts',
+      className: 'sidebar-title',
+    },
+  ],
+};
+```
+
+:::
+
 ### Category links {#category-link}
 
 With category links, clicking on a category can navigate you to another page.