@maggioli-design-system/mds-breadcrumb

mds-breadcrumb

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.

Properties

Property	Attribute	Description	Type	Default
back	back	Choose to display or not the back arrow button	boolean | undefined	true

Events

Event	Description	Type
mdsBreadcrumbChange	Emits when the breadcrumb is changed	CustomEvent<MdsBreadcrumbEventDetail>

Slots

Slot	Description
"default"	Add mds-breadcrumb-item element/s.

CSS Custom Properties

Name	Description
--mds-breadcrumb-arrow-depth-color	Sets the color of the arrow icon that separates buttons
--mds-breadcrumb-button-background	Sets the background color of the button
--mds-breadcrumb-button-background-current	Sets the background color of the button when it's active
--mds-breadcrumb-button-background-disabled	Sets the background color of the button when it's disabled, is used for arrow button
--mds-breadcrumb-button-background-hover	Sets the background color of the button when the mouse is over it
--mds-breadcrumb-button-color	Sets the text color of the button
--mds-breadcrumb-button-color-current	Sets the text color of the button when it's active
--mds-breadcrumb-button-color-disabled	Sets the text color of the button when it's disabled, is used for arrow button
--mds-breadcrumb-button-color-hover	Sets the text color of the button when the mouse is over it
--mds-breadcrumb-current-button-color	Sets the text color of the current depth button

Dependencies

Depends on

• mds-button

Graph

graph TD;
  mds-breadcrumb --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px

---

Built with love @ Gruppo Maggioli from R&D Department