How to use dcc.Link in dcc.Markdown for high performance links 🚀

Dash Python
1

One of the great things about multi-page apps with Dash is that when you navigate between pages with dcc.Location and dcc.Link, it updates the layout without refreshing the page, making the navigation super fast. :rocket:

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.

Examples

  1. Try running this example from the Dash Multi-page App Demos repo. You will be able to see the difference between using a regular Markdown link vs dccLink.

  2. Simple example:
    Note that it’s necessary to set dangerously_allow_html=True See more info in this forum post about writing secure dash apps

dcc.Markdown("<dccLink children=Home href='/' />",  dangerously_allow_html=True)
  1. 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,
)
  1. Link with an image:
dcc.Markdown(
    [
        """
    <dccLink href="/home">
        <img src="assets/image.png" height="300px" />
    </dccLink>
        """
    ],
    dangerously_allow_html=True,
)
  1. 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,
),
  1. See more examples in this gist
4 Likes
2

Great tutorial. THank you for sharing, @AnnMarieW .

I just added this tutorial to the message on “links to helpful posts”, inside the Community Support Group.