Is there a way to display the navigation icon to the left of the navigation heading instead of to the right?

[wiktoryia]

I want to place the navigation arrow icon to the left of the navigation list item . By default, it is displayed to the right. Some of the headings with these icons are not clickable and only work as containers for the headings of the lower level, and some are clickable and display the content of the corresponding index.md file. I want the icon move to be applied in both cases.

[alexvoss]

Hi, I am happy to try and help but may need more information. Can I look at what navigation and what arrows you are talking about? I searched the Material for MkDocs documentation for "arrow" but only found unrelated stuff - I think. A screenshot that shows the current behavior might suffice but a minimal reproduction of the behavior would be ideal.

One question to look at is whether the underlying generated HTML allows for the wanted change to be implemented simply with CSS, in which case a simple extra bit of CSS might be sufficient.

[alexvoss]

Hi again, sorry, do you mean the icons as used here? https://squidfunk.github.io/mkdocs-material/plugins/
Sorry, the mention of "arrow" may have confused me here.

[wiktoryia]

Hi! Sorry, I wasn't clear. By arrow, I meant navigation icon, I think .md-nav__icon is responsible for this element. Please see the screenshot with the icons.

I hope there is a way to move these navigation icons to the left of the headings using extra.css file

[alexvoss]

Ok, so the elements are arranged using a flexbox and it may be possible to do this by turning the flex-direction around for the container element, which has the .md-nav__link class. However you will need to select only those that within .md-nav__item--nested. Something like this might do the trick:

.md-nav__item--nested .md-nav__link { flex-direction: row-reverse}

Hope this helps. I will give it a try later on, just need to set up a small example project (which I need to do anyway) that has that form of navigation. (I fiddled with the Firefox developer tools to find this possible solution quickly.)

[alexvoss]

Ok, what I suggested has the unintended effect of making the navigation right-aligned. Need to learn more about the flexbox layout.

[alexvoss]

Can I ask which version of Material for MkDocs you are using? Would be a shame if I made it work in one and then you found it does not in yours.

[alexvoss]

This CSS does what you asked for:

.md-nav__link { 
  flex-direction: row-reverse;
}

.md-nav__link .md-ellipsis {
  flex-grow: 1;
}

[wiktoryia]

Thank you so much Alexander. I am using mkdocs version 1.5.2 and this worked!