Override the header to add a custom button to the end of nav

[zerenxyz]

I am trying to add a button to the end of the nav bar (far right) a custom button that redirects to a different page, I added it in my mkdocs.yml nav section like so:

# Navigation
nav:
  - Home: 'index.md'
  - News:
    - blog/index.md
  - Tutorials:
    - tutorials/index.md
  - Extra:
    - 'Home': 'extra/home.md'

I am trying to have the "Extra" nav button separate from the rest of nav items like this screenshot, where "Download" is to the far right.

I know this is possible with overrides and CSS, just not sure where to poke or start to actually do it, I looked up at other discussions and im thinking maybe header.html but still confused how to target specifically my "Extra" item as it doesnt have custom ID or something.

[squidfunk]

You should override tabs.html and add your button after the loop:

mkdocs-material/src/partials/tabs.html

Lines 34 to 36 in 018e5f8

	{% for nav_item in nav %}
	{% include "partials/tabs-item.html" %}
	{% endfor %}

Then, add the necessary CSS to align right (e.g. via float: right).

[santaimpersonator]

Update:

• The example below was working with mkdocs-material (v8.5.6). I just upgraded to v9.0.9 and now it doesn't 😅
• Fixed, in v9.0.9 line 29 was updated (not tested - using Insiders)
  • For insiders, you'll also need to include the changes on lines 23 and 34 (works if you include all three line changes)

---

I actually had to make the modification before the loop to get it to work. (It wouldn't work after the loop because of the unordered list element that is used.)

• Make sure to save the tabs.html file in the /docs/overrides/partials/ directory, as specified in the documentation
• Modifications:
  • <relative page link> - Replace with the generated page link for tab
  • <tab title> - Replace with title for tab
  • The if statement isn't necessary for this to work; it's an internal use item
    • Otherwise, <file name> should be replace with the markdown file for the tab
• Ignore the hidden repo link in the example result; it's just a private repo

Modification to tabs.html:

  <div class="md-tabs__inner md-grid">

    <!-- Adds tab on right side of header -->
    {% if "<file_name>.md" %}
    <ul class="md-tabs__list" style="float: right;">
      <li class="md-tabs__item">
        <a href="<relative page link>" class="md-tabs__link">
        <tab title>
        </a>
      </li>
    </ul>
    {% endif %}

    <!-- Original tabbed sections -->
    <ul class="md-tabs__list">
      {% for nav_item in nav %}
        {% include "partials/tabs-item.html" %}
      {% endfor %}
    </ul>
  </div>

Result:

[zerenxyz]

Sorry for the late reply! But this is amazing!

I applied the changes and it seems to center everything currently instead of the Result you have? (Image below)

I also noticed the update you mentioned with v9.0.9. I am still on v8.5.9+insiders.4.26.2, does any changes need to happen to work for this specific version?

[santaimpersonator]

The issue between the version change was that there is a small change in the tabs.hmtl code at line 29: aria-label="{{ lang.t('tabs') }}" changed to aria-label="{{ lang.t('tabs.title') }}". If I remember correctly, the webpage build would fail.

I don't see any changes that would cause all the navigation tabs to become centered. Do you have a link to your repo? Otherwise, I would suggest using your browser's developer tools to see if something might be overriding the styling of the md-tabs__list or md-tabs__item classed elements.

Here is an example of our GitHub pages w/ the right side tab; you can find our repo here.

[talwgx]

Hi guys,

I tested the proposed solution, and it does work, which is great! However, the right side tab is not shown if the page collapses to "hamburger mode" - the added tab does not display. I think it'll be good for completeness for it to be displayed there as well. Thank you so much!

[santaimpersonator]

Note

This example/information was provided, as a solution based on our needs/use case. By no means, is it supposed to work for the purposes of everyone else.

You are welcome to investigate a solution, for your own use case:

• I would start at @squidfunk's original response: Override the header to add a custom button to the end of nav #4612 (comment)
• You may need to manually generate the list that the loop would have provided

In regards to our solution, if you reference our original modifications (mentioned above):

  <div class="md-tabs__inner md-grid">

    <!-- Adds tab on right side of header -->
    {% if "<file_name>.md" %}
    <ul class="md-tabs__list" style="float: right;">
      <li class="md-tabs__item">
        <a href="<relative page link>" class="md-tabs__link">
        <tab title>
        </a>
      </li>
    </ul>
    {% endif %}

    <!-- Original tabbed sections -->
    <ul class="md-tabs__list">
      {% for nav_item in nav %}
        {% include "partials/tabs-item.html" %}
      {% endfor %}
    </ul>
  </div>

Our added tab, is clearly not included in the same list for the original tabbed section. Therefore, you shouldn't expect it to appear in the same hamburger (as the original tabs).

• This is the method that I was able to get working for our needs.
• It was a compromise we were satisfied with... for the sake of simplicity/maintenance, because we generate new tutorials/webpages on a regular basis.
  • i.e. We did not want to manually generate a new list for each new webpage/tutorial we publish (and maintain the list with future updates).
• We provided additional access to that tab through this button anyways, they navigate to the same page: