Flyout menu =========== When you are using a Read the Docs site, you will likely notice that we embed a menu on all the documentation pages we serve. This is a way to expose the functionality of Read the Docs on the page, without having to have the documentation theme integrate it directly. Functionality ------------- The flyout menu provides access to the following bits of Read the Docs functionality: * A :doc:`version switcher ` that shows users all of the active, unhidden versions they have access to. * :doc:`Offline formats ` for the current version, including HTML & PDF downloads that are enabled by the project. * Links to the Read the Docs dashboard for the project. * Links to your :doc:`VCS provider ` that allow the user to quickly find the exact file that the documentation was rendered from. * A search bar that gives users access to our :doc:`/server-side-search/index` of the current version. Closed ~~~~~~ .. figure:: /_static/images/flyout-closed.png :align: center The flyout when it's closed Open ~~~~ .. figure:: /_static/images/flyout-open.png :align: center The opened flyout Information for theme authors ----------------------------- .. warning:: *This is currently deprecated* in favor of the new Read the Docs Addons approach. We are working on an idea that exposes all the required data to build the flyout menu via a JavaScript ``CustomEvent``. Take a look at an example of this approach at https://github.com/readthedocs/sphinx_rtd_theme/pull/1526. We are looking for feedback on this approach before making it public. Please, comment on that PR or the linked issue from its description letting us know if it would cover your use case. People who are making custom documentation themes often want to specify where the flyout is injected, and also what it looks like. We support both of these use cases for themes. Defining where the flyout menu is injected ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The flyout menu injection looks for a specific selector (``#readthedocs-embed-flyout``), in order to inject the flyout. You can add ``
`` in your theme, and our JavaScript code will inject the flyout there. All other themes except for the ``sphinx_rtd_theme`` have the flyout appended to the ````. Styling the flyout ~~~~~~~~~~~~~~~~~~ HTML themes can style the flyout to make it match the overall style of the HTML. By default the flyout has it's `own CSS file `_, which you can look at to see the basic CSS class names. The example HTML that the flyout uses is included here, so that you can style it in your HTML theme: .. code:: html
  v: 2.1.x
Languages
en
es
Versions
latest
2.1.x
Downloads
PDF
HTML
On Read the Docs
Project Home
Builds
Downloads
On GitHub
View
Edit
Search

Hosted by Read the Docs · Privacy Policy