bring back segment wrapper and make it attached

eea · Mar 7, 2022 · 9f413ff · 9f413ff
1 parent 824b9be
commit 9f413ff
Showing 1 changed file with 28 additions and 21 deletions.
diff --git a/src/ui/Breadcrumbs/Breadcrumbs.jsx b/src/ui/Breadcrumbs/Breadcrumbs.jsx
@@ -6,32 +6,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Breadcrumb, Container, Image } from 'semantic-ui-react';
+import { Breadcrumb, Container, Image, Segment } from 'semantic-ui-react';
 
 import homeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/home-icon.svg';
 
 const Breadcrumbs = ({ root, sections = [], icon }) => {
   return (
-    <Container role="navigation" aria-label={'breadcrumbs'}>
-      <Breadcrumb>
-        <Link to={root || '/'} className="section" title={'Home'}>
-          <Image src={homeIcon} alt="home" />
-        </Link>
-        {sections.length > 0 &&
-          sections.map((item, index, items) => [
-            <Breadcrumb.Divider icon={icon} key={`divider-${item.href}`} />,
-            index < items.length - 1 ? (
-              <Link key={item.key} to={item.href} className="section">
-                {item.title}
-              </Link>
-            ) : (
-              <Breadcrumb.Section key={item.key} active>
-                {item.title}
-              </Breadcrumb.Section>
-            ),
-          ])}
-      </Breadcrumb>
-    </Container>
+    <Segment
+      role="navigation"
+      aria-label={'breadcrumbs'}
+      className="breadcrumbs"
+      attached
+    >
+      <Container>
+        <Breadcrumb>
+          <Link to={root || '/'} className="section" title={'Home'}>
+            <Image src={homeIcon} alt="home" />
+          </Link>
+          {sections.length > 0 &&
+            sections.map((item, index, items) => [
+              <Breadcrumb.Divider icon={icon} key={`divider-${item.href}`} />,
+              index < items.length - 1 ? (
+                <Link key={item.key} to={item.href} className="section">
+                  {item.title}
+                </Link>
+              ) : (
+                <Breadcrumb.Section key={item.key} active>
+                  {item.title}
+                </Breadcrumb.Section>
+              ),
+            ])}
+        </Breadcrumb>
+      </Container>
+    </Segment>
   );
 };