Long labels in the sidebar do not display correctly

Have you read the Contributing Guidelines on issues?

I have read the Contributing Guidelines on issues.

Prerequisites

I'm using the latest version of Docusaurus.
I have tried the npm run clear or yarn clear command.
I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
I have tried creating a repro with https://new.docusaurus.io.
I have read the console error message carefully (if applicable).

Description

I have sidebar items auto generated with @grapql-markdown
Some of the labels in the sidebar are very long and cannot be fully seen

It would be very helpful for the long labels to be truncated with an ellipse and a tooltip added so the full label can be seen on hover

Reproducible demo

No response

Steps to reproduce

Create a new Docusaurus site
Create content which has very long labels in the sidebar

The labels are hidden behind the page view

Expected behavior

Would like to see the labels truncated with an ellipse and a tooltip displayed on hover of the label

Actual behavior

The long labels in the sidebar are hidden by the page

Your environment

Public source code: none
Public site URL: none
Docusaurus version used: latest
Environment name and version (e.g. Chrome 89, Node.js 16.4): Edge
Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Self-service

I'd be willing to fix this bug myself.

@PranavKeshav24

@PranavKeshav24 you can already start working on it. We only assign an issue after you open a draft PR showing you are capable of solving the problem.

@pwizla

cc @pwizla I remember seeing Strapi docs also truncating sidebar labels, maybe that could serve as an inspiration for the CSS to use to solve this

https://docs.strapi.io/dev-docs/api/document-service

@slorber

Thank you for the heads-up, @slorber! This comment is timely as I'm completely reworking the style of Strapi docs. 😄

@PranavKeshav24 Here's what did the trick for us, if you simply want to truncate the content: https://github.com/strapi/documentation/blob/main/docusaurus/src/scss/sidebar.scss#L139-L140 (and you might not even need the white-space property, we have it because we sometimes add labels to the sidebar items).

@shipswake

@shipswake could you be more specific on how to reproduce the issue? I was not able to reproduce the bug

From above:

If you have a very long label in the sidebar the label will be hidden behind the page

The label should be truncated with an ellipsis and the full label readable in a tooltip when hovering over the label.

Here is the discussion:
#10529

@slorber

Thank you for the heads-up, @slorber! This comment is timely as I'm completely reworking the style of Strapi docs. 😄

@PranavKeshav24 Here's what did the trick for us, if you simply want to truncate the content: https://github.com/strapi/documentation/blob/main/docusaurus/src/scss/sidebar.scss#L139-L140 (and you might not even need the white-space property, we have it because we sometimes add labels to the sidebar items).

Thank you so much for sharing that. 😄

Any update on this?

Any update is visible in this thread. No PR means no progress.

@pwizla

Typically, the way this is done is by making the anchor tag a block element (display: block) and then apply the CSS properties to show ellipsis when the text overflows https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

The CSS properties to be set are: white-space(nowrap), overflow(hidden), and text-overflow(ellipsis): which is what @pwizla has pointed out above.👍

Any progress on this?

I already raised a question about this topic in a previous discussion, but now it affects me again, in a site that includes TypeScript Reference pages:

I know that table cells can be configured to cut long texts and show ellipses (with your help I fixed the custom tables in my pages), but sidebars are a bit more complicated and I could not fix them with local CSS patches.

Can we so something to make the sidebar look better? With the current layout I doubt we'll win any beauty contest... :-(

@slorber

@slorber, any idea how to patch the CSSs for the sidebar to cut long labels and show ellipses?

For the records, in case someone else will encounter this problem.

I fixed it by adding

className: doxyEllipsis to the sidebar entries that require ellipsis
the following CSS definitions:

.doxyEllipsis .menu__list-item {
  overflow: hidden;         /* Hide overflowing content */
}

.doxyEllipsis .menu__link {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important; /* Ensure it's a block element for ellipsis to work */
  margin-right: 0px;
}

.doxyEllipsis .menu__caret {
  flex-shrink: 0;           /* Prevent the button from shrinking */
  margin-left: 4px;         /* Add some space between text and button */
}

An example how this looks is the Classes -> Hierarchy entry in the µTest++ website:

https://micro-os-plus.github.io/micro-test-plus-xpack/docs/api/indices/classes/classes/

Going to be fixed in #11356

I choose line-clamp: 2 over the methods above since it's widely supported CSS now (under -webkit prefix though), and looks like a reasonable default to show 2 lines for most sites. But you can easily override that value.

We can clamp properly both docs/links and expandable category items (with/without generated index). Hover shows a tooltip thanks to title (not perfect for accessibility, but good enough).

It looks definitely better, thank you!

Navigation Menu

Repository navigation

Long labels in the sidebar do not display correctly #10531

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Reproducible demo

Steps to reproduce

Expected behavior

Actual behavior

Your environment

Self-service

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Long labels in the sidebar do not display correctly #10531

Description

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Reproducible demo

Steps to reproduce

Expected behavior

Actual behavior

Your environment

Self-service

Activity

PranavKeshav24 commented on Oct 1, 2024

slorber commented on Oct 3, 2024

slorber commented on Oct 3, 2024

pwizla commented on Oct 3, 2024

Sanjoy-droid commented on Oct 4, 2024

shipswake commented on Oct 4, 2024

PranavKeshav24 commented on Oct 7, 2024

Shrasingh commented on Oct 11, 2024

PrinceACS commented on Oct 12, 2024

omchaudhary007 commented on Oct 13, 2024

omchaudhary007 commented on Oct 13, 2024

YoosufAathil commented on Oct 14, 2024

krVatsal commented on Oct 14, 2024

shipswake commented on Oct 29, 2024

Josh-Cena commented on Oct 29, 2024

vipulbhasin23 commented on Jul 17, 2025

ilg-ul commented on Jul 21, 2025

ilg-ul commented on Jul 22, 2025

ilg-ul commented on Jul 29, 2025

slorber commented on Jul 31, 2025

ilg-ul commented on Aug 2, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions