Recreate app behavior similar to Dash documentation?

Dash Python
1

The Dash documentation states that it is a hosted Dash application. Are there any shared components and/or documentation that would allow me to get the same functionality as that app, and even the same look and feel if possible? I’d love to have my internal devops documentation look and act the same way. TIA./

2

The Dash Docs used to be maintained in an open source repo, but no longer unfortunately. You can see a snapshot of the app as it was back in 2021 here: GitHub - plotly/dash-docs: ISSUE TRACKER ONLY for The Official Dash Userguide & Documentation https://dash.plotly.com/

If there’s any specific parts of the Docs as it behaves currently that you’d like to emulate, it might be helpful to call them out specifically?

3

Hey Nedned. Thanks for your response. Sorry for my late response…I got sidetracked with another project.

The specific element that I’d love to be able to emulate is the left sidebar with the expanding sections. Beyond that, I just really like the style of the documentation. I’d love to be able to reproduce such an experience for my own internal documentation.

4

You might want to checkout Dash Bootstrap Components, if you haven’t before. I’ve used the Nav component in my Slapdash project for bootstrapping multi-page apps. There’s also the NavbarSimple and Navbar components. Some of those examples show the use of the dropdowns for sub-menus, but combining the Collapse component might get you closer to what you want.

You might find spinning up a skeleton app from Slapdash helpful for some ideas, or maybe even as a starting point for you docs.

As for the style more generally, if you’re trying to make a polished app, I find that past a certain point of leveraging the right Dash components and community components, it becomes more about careful design and implementation of your design via CSS. Which is to say the work required resembles general design work for any kind of web app. Dash Bootstrap Components definitely gives you a leg up here though!

5

hey @tcbegley are there any resources to help workout which of Nav, Navbar, NavbarSimple one might choose? I feel like the DBC docs do a decent job of contrasting Navbar and NavbarSimple, but as someone who has previously opted for Nav over them, I now can’t workout why a past Ned made that decision.

1 Like
6

I don’t think there are existing resources beyond the docs, and maybe this example. But let me do my best to explain when you might use each of them.

Nav creates a Bootstrap nav. This is really just a collection of links, usually used for navigation, displayed in a horizontal or vertical collection with some styles applied.

Navbar and NavbarSimple both create a Bootstrap navbar. This is a component that will typically sit at the top of the page and contain some branding information and be used for navigation around the site / app as a whole. Navbars typically contain a nav! If you use NavbarSimple the links you give it will be wrapped in a Nav for you.

So navs collect links together, navbars are a component that typically collect high-level site information and navigation together at the top of the page, and navbars often will contain a nav.

Finally the difference between NavbarSimple and Navbar? Due to some restrictions around how Dash components work (at least, when these components were first introduced), allowing the navbar to be fully customisable meant the navbar had to be constructed in a very manual fashion. In particular the user would have to do some extra work to enable the reponsive, collapsible navbar. However, in a lot of cases a navbar will have the site name and a bunch of links, for that specific case we created NavbarSimple which eliminates a bunch of boilerplate. If you want to make something more custom you can always fall back on Navbar.

So tl;dr:

  • Nav collects links together, usually for navigation, be it in-page (e.g. table of contents) or between pages
  • Navbar and NavbarSimple both create navbars usually used for high-level navigation of your app, and frequently will contain a nav.
  • NavbarSimple eliminates boilerplate in the most common use cases for a navbar.
  • Navbar gives you the possibility of full customisation.
2 Likes
7

ok yes, that makes sense! thank you so much for taking the time to go through that :purple_heart:

from the perspective of someone recently browsing around the DBC docs looking for this information, I feel like the key information that would be great to enhance the docs by would be:

  • if I’m on the Nav page, why would I want to use the Nav component directly rather than the NavbarSimple?
  • If I’m on the Navbar page, making it clear that NavbarSimple will automatically wrap your links with a Nav, whereas you need to do that yourself with Navbar
1 Like
8

Good suggestions! I’ve created an issue here to add this. I’ve had limited time for dbc recently, but hoping to clear some of the backlog of issues soon. Contributions very welcome too of course :smiley:

2 Likes
9

Hi @Blatwurst

As @nedned mentioned, dash-bootstrap-components is a great library. And the docs are also a Dash app made with dash-bootstrap-components. You can see the source code here:

If you want more information on how to style an app with dash-bootstrap-components, you can check out my site:

Another great library is dash-mantine-components

The docs are also a dash app made with dash-mantine-components - see the project here:

You can also check out Dash Extensions - the docs are also a dash app made with dash-mantine-components:

The Dash Extension docs are here:

The Dash Extension docs are made from @Emil’s cool dash-down project which renders markdown files as dash apps. This makes it easier to write apps that are tutorial or documentation.

Then ultimately, if you work for a company and would like your docs to look like the dash-docs, you could consider using Dash Enterprise :wink:

4 Likes