One of the great things about multi-page apps with Dash is that when you navigate between pages with
dcc.Link, it updates the layout without refreshing the page, making the navigation super fast.
Did you know that you can also use the
dcc.Link component from within a
dcc.Markdown? This makes it possible to use high performance links in Markdown text.
Note that it’s necessary to set
dangerously_allow_html=TrueSee more info in this forum post about writing secure dash apps
dcc.Markdown("<dccLink children=Home href='/' />", dangerously_allow_html=True)
- Link inline with text:
dcc.Markdown( 'This is an inlined <dccLink href="/page4" children="Page 4" /> with text on both sides', dangerously_allow_html=True, )
- Link with an image:
dcc.Markdown( [ """ <dccLink href="/home"> <img src="assets/image.png" height="300px" /> </dccLink> """ ], dangerously_allow_html=True, )
- Link with the link name formatted with Markdown syntax - in this case like an html.H2:
dcc.Markdown( [ """ <dccLink href="/page6"> <dccMarkdown children="## Page 6" /> </dccLink> """ ], dangerously_allow_html=True, ),
- See more examples in this gist