1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-12-22 04:16:03 +01:00
mkdocs-material/docs/setup/setting-up-the-header.md

73 lines
2.0 KiB
Markdown
Raw Normal View History

# Setting up the header
2023-09-14 19:09:18 +02:00
Material for MkDocs' header can be customized to show an announcement bar that
disappears upon scrolling, and provides some options for further configuration.
2021-10-10 21:04:22 +02:00
It also includes the [search bar] and a place to display your project's
[git repository], as explained in those dedicated guides.
2021-10-10 21:04:22 +02:00
[search bar]: setting-up-site-search.md
[git repository]: adding-a-git-repository.md
## Configuration
### Automatic hiding
2023-09-14 19:09:18 +02:00
<!-- md:version 6.2.0 -->
<!-- md:feature -->
2021-10-10 21:04:22 +02:00
When autohiding is enabled, the header is automatically hidden when the
user scrolls past a certain threshold, leaving more space for content. Add the
2021-01-31 19:23:28 +01:00
following lines to `mkdocs.yml`:
``` yaml
theme:
features:
- header.autohide
```
### Announcement bar
2023-09-14 19:09:18 +02:00
<!-- md:version 5.0.0 -->
<!-- md:flag customization -->
2021-10-03 20:28:52 +02:00
Material for MkDocs includes an announcement bar, which is the perfect place to
display project news or other important information to the user. When the user
scrolls past the header, the bar will automatically disappear. In order to add
2021-10-10 21:04:22 +02:00
an announcement bar, [extend the theme] and [override the `announce`
block][overriding blocks], which is empty by default:
``` html
{% extends "base.html" %}
{% block announce %}
2021-10-10 21:04:22 +02:00
<!-- Add announcement here, including arbitrary HTML -->
{% endblock %}
```
2021-10-10 21:04:22 +02:00
[extend the theme]: ../customization.md#extending-the-theme
[overriding blocks]: ../customization.md#overriding-blocks
2021-12-02 15:22:23 +01:00
#### Mark as read
2023-09-14 19:09:18 +02:00
<!-- md:version 8.4.0 -->
<!-- md:feature -->
<!-- md:flag experimental -->
2021-12-02 15:22:23 +01:00
In order to render temporary announcements that can be marked as read by the
user, a button to dismiss the current announcement can be included. Add the
following lines to `mkdocs.yml`:
``` yaml
theme:
features:
- announce.dismiss
```
When the user clicks the button, the current announcement is dismissed and not
displayed again until the content of the announcement changes. This is handled
automatically.
[Scroll to the top of this page][top] to see it in action.
[top]: #