Support custom NavbarBrand instead of just a string?

[mkhorton]

Hi, I'm not sure if I'm missing an obvious solution to this, but it seems like as currently written the Navbar brand has to be a string, even though the NavbarBrand component itself could in principle contain other items as children (eg an Html.Img)?

I'm looking for an easy way to add a left-aligned logo to a Navbar instead of only brand text.

Many thanks for releasing this component suite, it looks very useful.

[mkhorton]

Actually may be easier to do this via css and the brand_style.

[tcbegley]

Hey @mkhorton, you're right, the brand does have to be a string.

Currently it's only possible to pass Dash components as the children of other Dash components, not any other prop. So in particular you can't pass, e.g. html.Img to brand. There was an issue opened a while back on the dash-renderer repo that would have addressed this, but it's a big change and has been dormant for a little while, so I don't expect it to happen any time soon.

This restriction, and also because we were trying to keep the interface of Navbar relatively simple, meant that we sacrificed some customisability of the Navbar component.

I posted on the plotly community forums about how you could more manually construct a Bootstrap style navbar using dash-html-components and applying the relevant Bootstrap classes with className. Perhaps that's of use to you for now.

As a longer-term fix, since multiple people are asking similar questions, perhaps we can create a CustomNavbar component that gives you full control over the contents, but would require some careful construction of the children. @pbugnion what do you think?

[pbugnion]

I agree with the idea of a new custom component that gives more control over the children. It seems like a good way to give the user (almost) arbitrary flexibility, but still keeping a simple navbar for people who don't need all that flexibility.

[ned2]

I would love a custom component that supports more control over the children. I just came here to open an issue asking about just this.

In addition to overcoming the limitation of only having strings as the brand prop, I was also hoping to be able to add Dash components to parts of the Navbar that are not nav-items. For example, including an form element before the nav items, as in this Bootstrap dashboard.

[tcbegley]

Thanks @ned2, that example is really nice, it would definitely be good if people could build that sort of thing using dash-bootstrap-components.

There seems to be a lot of demand for this, so I'll prioritise it and start thinking about the best way to provide a more flexible component.

[tcbegley]

I've just opened #118 which adds a CustomNavbar component, go check it out for some screenshots and details on how to test it out yourself. Thoughts / feedback very welcome.

[tcbegley]

This has been resolved by #118 which has been released as version 0.3.0 of dash-bootstrap-components. You now have full control over the children of Navbar. We've also added a NavbarSimple component that has the same functionality as the old Navbar in case you don't need the flexibility of the new component.

Check out the docs or the Navbar examples for more.

[mkhorton]

Thanks for adding this!