Hide Search Bar

[nicfv]

Hi, I've enabled the search feature but would like to hide it on certain pages. Is this currently possible, and if so, how? I tried this at the top of my markdown page, but it doesn't seem to work:

---
hide:
  - navigation
  - toc
  - search
---

# Example

...

[kamilkrzyskow]

This functionality is not implemented in the theme, as straightforwardly as hiding navigation or the toc.
However, you can add your own CSS to hide the elements: https://squidfunk.github.io/mkdocs-material/customization/#additional-css
But instead of adding the extra.css file to the mkdocs.yml file you can add a <link rel="stylesheet" href="/stylesheets/extra.css"> tag to your Markdown page. When setting the href please mind the absolute path with / at the beginning or /repository-name/ for GitHub pages.

To hide the search input with CSS you can use this:

.md-search {
  display: none;
}

Instead of display: none;, visibility: hidden; can also be used, with a different behaviour.

---

Another approach would be to mimic the way hide: navigation works:

mkdocs-material/src/templates/base.html

Lines 297 to 314 in 246266f

	<!-- Navigation -->
	{% if nav %}
	{% if page.meta and page.meta.hide %}
	{% set hidden = "hidden" if "navigation" in page.meta.hide %}
	{% endif %}
	<div
	class="md-sidebar md-sidebar--primary"
	data-md-component="sidebar"
	data-md-type="navigation"
	{{ hidden }}
	>
	<div class="md-sidebar__scrollwrap">
	<div class="md-sidebar__inner">
	{% include "partials/nav.html" %}
	</div>
	</div>
	</div>
	{% endif %}

You can override the partials/search.html with your own version that takes the hide: search value into consideration.
https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme

IMO the CSS approach is better than overriding the templates.

---

Also keep in mind, that this will still put the code in the HTML and it can be detected by web scrapers etc. it's only a visual change for the rendered website.

[kamilkrzyskow]

Additionally to the extra CSS file, instead of the <link> tag in Markdown, I guess you could override the main.html together with the extrahead block. https://squidfunk.github.io/mkdocs-material/customization/#overriding-blocks
You could setup the same conditional structure as the base.html and decide on certain pages to include the <link> directly in the extrahead block. This would allow you to use the same hide header in the front-matter.

[nicfv]

@kamilkrzyskow - thank you so much for your fast and detailed answer. I did not try your second solution but I tried your first solution utilizing the extra CSS page link directly in Markdown.

When setting the href please mind the absolute path with / at the beginning or /repository-name/ for GitHub pages.

I wonder if this was patched, because I tried it with a relative path, and it worked exactly as intended. (I am using GH pages for this project.)

<link rel="stylesheet" type="text/css" href="extra.css" />

.md-search,
.md-tabs {
    display: none;
}

[kamilkrzyskow]

You can of course use relative paths, but if your Markdown page is nested in a directory you'd need to pay attention to adding some ../ at the start. Absolute paths would keep it more simple, just copy paste the same thing across every file.
Also I think in HTML you don't have to add the /> at the end of the self-closing tag ✌️