Show a 'new' badge on a docusaurus sidebar item

Question

I'm using docusaurus for our product documentation.

Regarding the sidebar, I would like to add a 'new' badge after some sidebar items to indicate that the item documentation is new.

Something like that: new label on item

To do that, in sidebar.js, I tried to do this:

{
          "type": "doc",
          "id": "mydocid",
          "label": 'mydoc subject',
          "className": "newText"
},

I tried to use .newText::after to add an image but it doesn't work. Any thoughts ?

Answer 1

This is somewhat of a workaround. The advantages of this solution is that docusaurus generates a sidebar for you. Therefore, you do not need to maintain the sidebar.

In the sidebar.js file, you can keep it as autogenerated.

const sidebars = {
  docs: [{type: 'autogenerated', dirName: '.'}],
};

Add the new badge (emoji) in the markdown title like so:

# Test 🆕

Sidebar result: