@maggioli-design-system/mds-breadcrumb-item NPM

mds-breadcrumb-item

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 JavaScript framework you are using.

Properties

Property	Attribute	Description	Type	Default
`selected`	`selected`	Choose if the component is selected or not	`boolean \\| undefined`	`undefined`

Events

Event	Description	Type
`mdsBreadcrumbItemSelect`	Emits when the breadcrumb is active	`CustomEvent<MdsBreadcrumbItemEventDetail>`

Slots

Slot	Description
`"default"`	Add `text string` to this slot, avoid to add `HTML elements` or `components` here.

CSS Custom Properties

Name	Description
`--mds-breadcrumb-item-arrow-depth-color`	Sets the color of the arrow icon that separates buttons
`--mds-breadcrumb-item-button-background`	Sets the background color of the button
`--mds-breadcrumb-item-button-background-hover`	Sets the background color of the button when the mouse is over it
`--mds-breadcrumb-item-button-background-selected`	Sets the background color of the button when it's active
`--mds-breadcrumb-item-button-color`	Sets the text color of the button
`--mds-breadcrumb-item-button-color-hover`	Sets the text color of the button when the mouse is over it
`--mds-breadcrumb-item-button-color-selected`	Sets the text color of the button when it's active
`--mds-breadcrumb-item-outline-blur`	Sets the blur color when the button is blurred via keyboard
`--mds-breadcrumb-item-outline-blur-offset`	Sets the blur offset color when the button is blurred via keyboard
`--mds-breadcrumb-item-outline-focus`	Sets the focus color when the button is focused via keyboard
`--mds-breadcrumb-item-outline-focus-offset`	Sets the focus offset color when the button is focused via keyboard

Dependencies

Depends on

mds-text

Graph

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

Built with love @ Gruppo Maggioli from R&D Department

@maggioli-design-system/mds-text @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @maggioli-design-system/mds-breadcrumb

9 months ago

9 months ago

9 months ago

12 months ago

12 months ago

10 months ago

6 months ago

8 months ago

6 months ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago