diff --git a/apps/www/src/content/docs/components/navbar/demo.css b/apps/www/src/content/docs/components/navbar/demo.css
index 5562ae167..97716a237 100644
--- a/apps/www/src/content/docs/components/navbar/demo.css
+++ b/apps/www/src/content/docs/components/navbar/demo.css
@@ -3,4 +3,4 @@
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
index a8ae669c9..7a993b0c9 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
@@ -35,6 +35,14 @@ export const BreadcrumbItem = ({
   dropdownItems,
   ...props
 }: BreadcrumbItemProps) => {
+  const {
+    id,
+    title,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby
+  } = props;
+
   const renderedElement = as ?? <a ref={ref} />;
   const label = (
     <>
@@ -52,7 +60,11 @@ export const BreadcrumbItem = ({
           <Menu.Trigger
             ref={ref as React.Ref<HTMLButtonElement>}
             className={styles['breadcrumb-dropdown-trigger']}
-            {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+            id={id}
+            title={title}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            aria-describedby={ariaDescribedby}
           >
             {label}
             <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />
diff --git a/packages/raystack/components/navbar/navbar.module.css b/packages/raystack/components/navbar/navbar.module.css
index 1dac86d82..bd9ecc739 100644
--- a/packages/raystack/components/navbar/navbar.module.css
+++ b/packages/raystack/components/navbar/navbar.module.css
@@ -41,4 +41,4 @@
 .end {
   grid-column: 3;
   justify-self: end;
-}
\ No newline at end of file
+}