Customize title of DBC accordion item

Dash Python
1

I’m using the Dash bootstrap component “Accordion” as a navigation tool for my dashboard.
I would like to customize the title of the dbc.AccordionItems. In the documentation I can only find that the title argument is optional and should be a string. However, I would like it to be an Icon or another HTML component.

Is this possible or is the only way to achieve this, to create my own accordion with seperate dbc.collapses ?

Screenshot at Feb 20 16-16-41
Screenshot at Feb 20 16-16-411486×674 14.4 KB

Example Code

from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash

app = dash.Dash(__name__)

accordion = html.Div(
            [
                html.Div(
                    dbc.Accordion(
                        [
                            dbc.AccordionItem(
                                dbc.Nav(
                                    [
                                        dbc.NavLink("Link 1", href=f"/link1/", style = {'color':'black'}),
                                        dbc.NavLink("Link 2", href=f"/link2/", style = {'color':'black'}),
                                    ],
                                    vertical=True,
                                    pills=True,
                                )
                                , title=f"TITEL" # I would like to customize this with e.g. html.I(classname=...)
                            )
                        ],
                        start_collapsed=False,
                    ),
                ),
            ],
            id="accordion-id",
        )
# embedding the navigation bar
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    accordion,
    html.Div(id='page-content')
])

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

if __name__ == '__main__':
    app.run_server(debug=True)```
2

Hi @LucasBer
Welcome to the Community!

If you are open to using another component library, in this case, dash-mantine-components, you can do this:

Screenshot 2022-02-20 at 9.18.10 PM
Screenshot 2022-02-20 at 9.18.10 PM3808×2414 238 KB

with this code:

from dash import Dash
from dash_iconify import DashIconify
import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = dmc.Accordion(
    [
        dmc.AccordionItem(
            icon=[DashIconify(icon="bx:user", color="blue")],
            label="Personal Information",
            children=["Item 1"],
        ),
        dmc.AccordionItem(
            icon=[DashIconify(icon="akar-icons:check-in", color="red")],
            label="Shipping Address",
            children=["Item 2"],
        ),
        dmc.AccordionItem(
            icon=[DashIconify(icon="ant-design:check-circle-outlined", color="green")],
            label=[
                "Discounts",
                dmc.Badge(
                    "New",
                    color="green",
                    variant="outline",
                    size="xs",
                    style={"marginLeft": 10},
                ),
            ],
            children=["Item 3"],
        ),
    ],
    disableIconRotation=True,
)

if __name__ == "__main__":
    app.run_server(debug=True)

Things to note here:

  1. I’m using dash-iconify library for icons as it lets me use icons from different icon sets and customise them easily.
  2. When you are passing components in a property other than children for example in this case, icon and label, make sure you pass a list.

Hope this helps.

5 Likes
3

I didn’t know about this library yet. Thanks for your answer this helps me alot!

2 Likes