Note: Experiment: MS Edge doesn't support before version 79.
Details and summary can be used anywhere, not only in the navigation area.
Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.
<!DOCTYPE html>
<html>
<head>
<style>
html {font-size: 20px;}
nav {position: fixed; background: lightblue; margin-left: 80%; margin-right: 5px; margin-top: 0; height: 500px; font-size: 26px;}
details {border: none;}
details > summary {border: none; padding-top: 30px;}
.p1 {padding-left: 20px; padding-top: 30px; line-height: 1.5;}
</style>
</head>
<body>
<nav>
<details>
<summary>
<a href= "https://www.johnandval.org/schooldays.html" title= "This link has two sublinks">School Days</a>
</summary>
<p><img src= "jfa.ico">
<a href= "https://johnandval.org/phs55/index.html">PHS 1955</a><br>
<img src= "jfa.ico">
<a href= "https://johnandval.org/lchs/index.html">LCHS 1963</a>
</details>
<br>
<details>
<summary
><a href= "https://www.johnandval.org/schooldays.html">School Days <img src= "schoolhouse.jpg" width= "20%" title= "School Days"></a>
</summary>
<p>Either the image or the subject text should work as a link to the same page.
</details>
<br>
<details>
<summary>School Days</summary>
<p>Details and summary do not need to contain a link, merely a subject. </details>
<p class= "p1"><a href= "index.html">Index</a><br></p1>
<p class= "p1"><a href= "https://johnandval.org/"><img src= "jfa.ico" width= "50px"></a>
</nav>
<h1>The details and the summary element</h1>
<p><b>Note:</b> Experiment: MS Edge doesn't support before version 79.
<p>Details and summary can be used anywhere, not only in the navigation area.<br>
<div style= "float: left; text-align: center; width; 60px; padding: 30px;">
<figure>
<img src= "schoolhouse.jpg">&
#60figcaption>desired caption</figcaption>&
#60/figure>
</div>
<div style= "float: left; text-align: center; width; 60px; padding: 30px;">
<figure>
<img src= "schoolhouse.jpg">
<figcaption>desired caption</figcaption>
</figure>
</div>
<div style= "float: left; text-align: center; width; 60px; padding: 30px;">
<figure>
<img src= "schoolhouse.jpg">
<figcaption>desired caption</figcaption>
</figure>
</div>
<p style= "clear: left">
<figure style= "focus-within">
<a href= "" title= "This is a schoolhouse"><img src= "schoolhouse.jpg">School House</a>
<figcaption style= "display: none">xx</figcaption>The display choice(none) causes the
fig-caption xx not to show.
</figure>
</body>
</html>