feat: enhance DBBreadcrumb with vertical centering and className support across all showcases

Author: sarahbrng

packages/components/src/components/breadcrumb/breadcrumb.scss

@@ -42,6 +42,7 @@
 			align-items: center;
 			padding: variables.$db-spacing-fixed-3xs
 				variables.$db-spacing-fixed-2xs; // 2px 4px (small)
+
 			border-radius: variables.$db-border-radius-xs; // 4px
 			background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 			color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
@@ -88,24 +89,32 @@
 	// Medium size variant
 	&[data-size="medium"] {
 		.db-breadcrumb-list {
-			gap: variables.$db-spacing-fixed-2xs; // 4px gap for medium
+			// Slightly more breathing room for medium size (matches Figma spacing)
+			gap: variables.$db-spacing-fixed-xs; // 8px gap for medium
+
+			/* ensure list items are vertically centered in medium size */
+			align-items: center;
 		}
 
 		li {
-			gap: variables.$db-spacing-fixed-2xs; // 4px between separator and item (medium)
+			// Increase gap between separator and item for better touch target
+			gap: variables.$db-spacing-fixed-xs; // 8px between separator and item (medium)
 
 			&:not(:first-child)::before {
-				inline-size: variables.$db-sizing-md +
-					variables.$db-spacing-fixed-2xs; // 28px (medium)
-				block-size: variables.$db-sizing-md +
-					variables.$db-spacing-fixed-2xs;
-				font-size: variables.$db-sizing-lg; // 24px
+				// Make the chevron larger to match visual weight in Figma
+				inline-size: variables.$db-sizing-lg; // ~24px
+				block-size: variables.$db-sizing-lg;
+				font-size: variables.$db-sizing-lg; // use large sizing token
+				font-weight: 600;
+				color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 			}
 
 			a,
 			span {
+				// Keep the medium padding but ensure comfortable tap/click area
 				padding: variables.$db-spacing-fixed-2xs
 					variables.$db-spacing-fixed-xs; // 4px 8px (medium)
+
 				font-size: variables.$db-sizing-md; // 16px (body-md)
 				line-height: variables.$db-sizing-lg; // 24px
 			}

showcases/angular-showcase/src/app/components/breadcrumb/breadcrumb.component.html

@@ -10,18 +10,28 @@
 		let-exampleIndex="exampleIndex"
 		let-variantIndex="variantIndex"
 	>
-		<db-breadcrumb>
-			@for (item of exampleProps?.children; track $index) {
-				@if (item.href) {
-					<li>
-						<a [href]="item.href">{{ item.text }}</a>
-					</li>
-				} @else {
-					<li [attr.aria-current]="item.ariaCurrent">
-						<span>{{ item.text }}</span>
-					</li>
+		<!-- Plain HTML structure to avoid relying on missing Angular wrapper / web component -->
+		<nav
+			[attr.class]="
+				'db-breadcrumb' +
+				(exampleProps?.className ? ' ' + exampleProps.className : '')
+			"
+			[attr.data-size]="exampleProps?.size ?? 'small'"
+			aria-label="breadcrumb"
+		>
+			<ol class="db-breadcrumb-list" role="list">
+				@for (item of exampleProps?.children; track $index) {
+					@if (item.href) {
+						<li>
+							<a [href]="item.href">{{ item.text }}</a>
+						</li>
+					} @else {
+						<li [attr.aria-current]="item.ariaCurrent">
+							<span>{{ item.text }}</span>
+						</li>
+					}
 				}
-			}
-		</db-breadcrumb>
+			</ol>
+		</nav>
 	</ng-template>
 </app-default-component>

showcases/react-showcase/src/components/breadcrumb/index.tsx

@@ -3,16 +3,32 @@ import defaultComponentVariants from '../../../../shared/breadcrumb.json';
 import { getVariants } from '../data';
 import DefaultComponent from '../default-component';
 
-const getBreadcrumb = ({ children, size }: any) => (
-	<DBBreadcrumb size={size}>
+type BreadcrumbItem = {
+	href?: string;
+	text: string;
+	ariaCurrent?: 'page' | undefined;
+};
+
+type BreadcrumbExampleProps = {
+	children?: BreadcrumbItem[];
+	size?: 'small' | 'medium';
+	className?: string;
+};
+
+const getBreadcrumb = ({
+	children,
+	size,
+	className
+}: BreadcrumbExampleProps) => (
+	<DBBreadcrumb size={size} className={className}>
 		{children && Array.isArray(children)
-			? children.map((item: any, index: number) =>
+			? children.map((item, index) =>
 					item.href ? (
 						<li key={index}>
 							<a href={item.href}>{item.text}</a>
 						</li>
 					) : (
-						<li key={index} aria-current={item.ariaCurrent}>
+						<li key={index} aria-current={item.ariaCurrent as any}>
 							<span>{item.text}</span>
 						</li>
 					)
@@ -21,16 +37,18 @@ const getBreadcrumb = ({ children, size }: any) => (
 	</DBBreadcrumb>
 );
 
-const BreadcrumbComponent = (props: any) => {
-	return (
-		<DefaultComponent
-			title="DBBreadcrumb"
-			variants={getVariants(
-				defaultComponentVariants,
-				getBreadcrumb,
-				props.slotCode
-			)}></DefaultComponent>
-	);
+type BreadcrumbComponentProps = {
+	slotCode?: Record<string, React.FC>;
 };
 
+const BreadcrumbComponent = (props: BreadcrumbComponentProps) => (
+	<DefaultComponent
+		title="DBBreadcrumb"
+		variants={getVariants(
+			defaultComponentVariants,
+			getBreadcrumb,
+			props.slotCode
+		)}></DefaultComponent>
+);
+
 export default BreadcrumbComponent;

showcases/react-showcase/src/components/data.ts

@@ -14,6 +14,8 @@ export const getVariants = (
 			],
 		examples: variant.examples.map((example, exampleIndex) => ({
 			...example,
+			// Ensure className from props is available on the example object
+			className: example.className ?? example.props?.className,
 			example: getExample({
 				...example.props,
 				id: example.props?.id ?? example.name,

showcases/shared/breadcrumb.json

@@ -4,6 +4,7 @@
 		"examples": [
 			{
 				"name": "(Default) Small",
+				"className": "w-full",
 				"props": {
 					"size": "small",
 					"children": [
@@ -15,6 +16,7 @@
 			},
 			{
 				"name": "Medium",
+				"className": "w-full",
 				"props": {
 					"size": "medium",
 					"children": [

showcases/showcase-styles.css

@@ -67,6 +67,18 @@ db-card:is(.variants-card) > .db-card {
 	margin-block: 0 auto;
 }
 
+/* Breadcrumb showcase: stack breadcrumb examples vertically */
+@supports selector(:has(*)) {
+	.variants-list > div:has(.db-breadcrumb) {
+		flex: 0 0 100%;
+	}
+}
+
+/* Fallback: if :has unsupported, rely on utility class or force wrappers containing db-breadcrumb to behave as block via descendant width trick */
+.variants-list .db-breadcrumb {
+	inline-size: 100%;
+}
+
 .html-code-container {
 	display: flex;
 	flex-direction: column;

showcases/vue-showcase/src/components/breadcrumb/breadcrumb.vue

@@ -15,7 +15,8 @@ const DBBreadcrumb = "nav";
 		>
 			<component
 				:is="DBBreadcrumb"
-				class="db-breadcrumb"
+				:class="['db-breadcrumb', exampleProps?.className]"
+				:data-size="exampleProps?.size"
 				aria-label="breadcrumb"
 			>
 				<ol class="db-breadcrumb-list" role="list">