Quickstart App examples - With responsive navbars and headers

[AnnMarieW]

See the AppShell section for more information on how to make an app's navbars and headers look great on both mobile and desktop.

Here are links to 8 examples. Feel free to post more here too!

1. Basic AppShell with Header and Navbar

   • View Code on GitHub
   • Live Demo on PyCafe

2. Responsive Width and Height

   • View Code on GitHub
   • Live Demo on PyCafe

3. Mobile-Only Navbar

   • Buttons in the header are displayed in the navbar on mobile.
   • View Code on GitHub
   • Live Demo on PyCafe

4. Collapsible Navbar on Desktop and Mobile

• View Code on GitHub
• Live Demo on PyCafe

5. Full AppShell Layout

   • Includes all elements: navbar, header, aside, and footer.
   • View Code on GitHub
   • Live Demo on PyCafe

6. Scrollable Navbar with 60 Links

   • View Code on GitHub
   • Live Demo on PyCafe

7. Alternate AppShell Layout

   • Navbar and aside are rendered on top of the header and footer.
   • View Code on GitHub
   • Live Demo on PyCafe

8. AppShell with Theme Switch Component

   • View Code on GitHub
   • Live Demo on PyCafe

[AnnMarieW]

Here's another example from the Dash community forum

[Sidebar with icons expands on hover]((https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/32)