Merge pull request #412 from Infineon/235-documentation-breadcrumb

Documentation: breadcrumb

packages/components/src/components/breadcrumb/Usage.mdx

@@ -0,0 +1,58 @@
+import { Meta  } from '@storybook/blocks';
+import * as BreadcrumbStories from './breadcrumb.stories';
+import BreadcrumbAnatomy from '../../../public-storybook/images/breadcrumb/breadcrumb-anatomy.png';
+import BreadcrumbMouseInteraction from '../../../public-storybook/images/breadcrumb/breadcrumb-mouse-interaction.png';
+import BreadcrumbStates from '../../../public-storybook/images/breadcrumb/breadcrumb-states.png';
+import BreadcrumbPositioningDesktop from '../../../public-storybook/images/breadcrumb/breadcrumb-positioning-desktop.png';
+import BreadcrumbPositioningMobile from '../../../public-storybook/images/breadcrumb/breadcrumb-positioning-mobile.png';
+
+<Meta of={BreadcrumbStories} />
+
+
+# Breadcrumb
+Breadcrumbs are a navigational aid that provides users with a hierarchical trail of links, allowing them to understand their current location within a website or application.
+
+## Usage
+
+### When to use
+- When your website or application has a hierarchical structure, such as categories, subcategories, and pages.
+- If users need to navigate through multiple levels to access specific information.
+
+### When not to use
+- If your website has a simple and shallow structure with only a few levels.
+
+## Anatomy
+<img src={BreadcrumbAnatomy} alt="Breadcrumb Anatomy" />
+
+**Parent Link (1)**\
+Guides users to the parent-level page.
+
+
+**Separator (2)**\
+A visual divider that separates each breadcrumb element.
+
+
+**Dropdown Icon (3)**\
+Serves as an indicator for a dropdown menu.
+
+
+**Current Page (4)**\
+Shows which page the user is currently on.
+
+
+## Positioning
+The breadcrumb navigation is displayed under the navigation bar and is aligned with the grid or the brand logo.
+### Desktop
+<img src={BreadcrumbPositioningDesktop} alt="Breadcrumb Position Desktop" />
+
+### Mobile
+<img src={BreadcrumbPositioningMobile} alt="Breadcrumb Position Mobile" />
+
+## Mouse interaction
+Every single breadcrumb link is clickable. The page the user is currently on is not clickable. This page is characterised by the fact that it does not have an underlined style. The click area corresponds to the text width and line height. Dropdown icons have a separate link area.
+<img src={BreadcrumbMouseInteraction} alt="Breadcrumb Mouse Interaction" />
+
+
+***
+Check out the Figma component: **[Breadcrumb](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=21410-15356&mode=design&t=Uw3fwZdQW62P8kSV-4)**
+***