=== Description
Narrow screens present a layout challenge for the updated table of contents. Because we believe that the table of contents is useful for people with narrow screens, we would like to find a solution for how to provide it to them.
===== The challenge
Because the new table of contents is positioned to the side of the article, and is fixed in place, as the screen gets smaller the article eventually gets squished:
| browser width: 850px
| --
| {F35061978}
===== Possible solutions
We have thought of three general solutions so far (please feel free to add others):
**1. Inline, after the lead section**
This is a straightforward solution. The table of contents gets positioned inline for narrow screens. The main drawback here is that you cannot access the table of contents once you have scrolled down the page.
| {F35061987}
prototype: https://di-article-tools-da959.web.app/Bleach_(Nirvana_album)
----
**2. Floating button + sidebar**
There is a button to the side of the article, clicking on it opens the table of contents in a sidebar. The button is fixed position so it is always available. There are several options for the design and position of the button. One example is shown below.
| {F35061990} | {F35061989}
prototype: https://di-toc-floating-button-sidebar.web.app/Bleach_(Nirvana_album)
----
**3. Collapsed sections**
Article sections are collapsed. The collapsed sections create a sort of pseudo-table of contents. The main drawback to this solution is that the information on the page is less discoverable because it's collapsed. You can no longer just scroll & read. Additionally you can't use "find in page". Note: this is what we do on the mobile website.
| {F35061999}
prototype: https://di-toc-collapsible-sections.web.app/Bleach_(Nirvana_album)
----
**4. No table of contents**
Hide the table of contents for narrow screens