Refactor(breadcrumbs)!: expect a mapping from names to URLs

pages/custom.py

@@ -61,11 +61,13 @@
 
 with tab4:
     code = """
-        st_undp.breadcrumb([
-            {'Home': '/'},
-            {'Custom components': '/custom'},
-            {'Breadcrumb': None}
-        ])
+        st_undp.breadcrumb(
+            {
+                "Home": "/",
+                "Custom components": "/custom",
+                "Breadcrumb": None,
+            }
+        )
     """
     eval(code.strip())
     with st.expander("Show Code"):

st_undp/components.py

@@ -342,14 +342,17 @@ def image_card(src: str, summary: str, href: str, width: int = 12) -> None:
     st.html(body)
 
 
-def breadcrumb(items: list[dict[str, str]]) -> None:
+def breadcrumb(items: dict[str, str]) -> None:
     """
     [Breadcrumbs](https://design.undp.org/?path=/docs/components-navigation-components-breadcrumbs--docs) component.
 
+    The breadcrumbs are arranged in the same order as dictionary keys. Last item's value is ignored and can be
+    set to None.
+
     Parameters
     ----------
-    items : list[dict[str, str]
-        List of items where each item maps a title to a URL.
+    items : dict[str, str]
+        Mapping from names to URLs.
 
     Returns
     -------

st_undp/templates/breadcrumb.html

@@ -1,9 +1,11 @@
 <nav class="breadcrumb">
     <ul>
-        {% for item in items %} {% for label, url in item.items() %} {% if url %}
-          <li><a href="{{ url }}" aria-label="{{label}}">{{ label }}</a></li>
-        {% else %}
-          <li aria-current="{{label}}">{{ label }}</li>
-        {% endif %} {% endfor %} {% endfor %}
+        {% for label, url in items.items() %}
+            {% if not loop.last %}
+                <li><a href="{{ url }}" aria-label="{{label}}">{{ label }}</a></li>
+            {% else %}
+                <li aria-current="{{label}}">{{ label }}</li>
+            {% endif %}
+        {% endfor %}
     </ul>
 </nav>