diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 6ead4a3d..280408fb 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -29,6 +29,8 @@ jobs:
     - name: Installing modules
       id: install_modules
       run: |
+        yarn cache clean
+        rm -rf node_modules
         yarn install
     - name: Build test
       id: build_test
diff --git a/__tests__/breadcrumbs.test.tsx b/__tests__/breadcrumbs.test.tsx
new file mode 100644
index 00000000..612901eb
--- /dev/null
+++ b/__tests__/breadcrumbs.test.tsx
@@ -0,0 +1,83 @@
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import {
+  ReqoreBreadcrumbs,
+  ReqoreLayoutContent,
+  ReqoreUIProvider,
+} from '../src';
+
+test('Renders full <Breadcrumbs /> properly', () => {
+  render(
+    <div style={{ width: '1000px' }}>
+      <ReqoreUIProvider>
+        <ReqoreLayoutContent>
+          <ReqoreBreadcrumbs
+            items={[
+              { label: 'Page 1', icon: 'home' },
+              { label: 'Page 2', icon: 'home' },
+              { label: 'Page 3', icon: 'home' },
+              { label: 'Page 4', icon: 'home' },
+              { label: 'Page 5', icon: 'home' },
+            ]}
+          />
+        </ReqoreLayoutContent>
+      </ReqoreUIProvider>
+    </div>
+  );
+
+  expect(document.querySelectorAll('.reqore-breadcrumbs-wrapper').length).toBe(
+    1
+  );
+  expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(5);
+});
+
+test('Renders shortened <Breadcrumbs /> properly', () => {
+  act(() => {
+    render(
+      <ReqoreUIProvider>
+        <ReqoreLayoutContent>
+          <ReqoreBreadcrumbs
+            _testWidth={300}
+            items={[
+              { label: 'Page 1', icon: 'home' },
+              { label: 'Page 2', icon: 'home' },
+              { label: 'Page 3', icon: 'home' },
+              { label: 'Page 4', icon: 'home' },
+              { label: 'Page 5', icon: 'home' },
+            ]}
+          />
+        </ReqoreLayoutContent>
+      </ReqoreUIProvider>
+    );
+  });
+
+  expect(document.querySelectorAll('.reqore-breadcrumbs-wrapper').length).toBe(
+    1
+  );
+  expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(3);
+});
+
+test('Shows hidden <Breadcrumbs /> items on click', () => {
+  act(() => {
+    render(
+      <ReqoreUIProvider>
+        <ReqoreLayoutContent>
+          <ReqoreBreadcrumbs
+            _testWidth={300}
+            items={[
+              { label: 'Page 1', icon: 'home' },
+              { label: 'Page 2', icon: 'home' },
+              { label: 'Page 3', icon: 'home' },
+              { label: 'Page 4', icon: 'home' },
+              { label: 'Page 5', icon: 'home' },
+            ]}
+          />
+        </ReqoreLayoutContent>
+      </ReqoreUIProvider>
+    );
+
+    fireEvent.click(document.querySelectorAll('.reqore-breadcrumbs-item')[1]);
+  });
+
+  expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(3);
+});
diff --git a/__tests__/sidebar.test.tsx b/__tests__/sidebar.test.tsx
index 49667207..3c9a3e27 100644
--- a/__tests__/sidebar.test.tsx
+++ b/__tests__/sidebar.test.tsx
@@ -1,13 +1,13 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { ReqoreUIProvider } from '../src';
-import QorusSidebar from '../src/components/Sidebar';
+import ReqoreSidebar from '../src/components/Sidebar';
 import { qorusSidebarItems } from '../src/mock/menu';
 
 test('Renders sidebar', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar items={qorusSidebarItems} path='/' />
+      <ReqoreSidebar items={qorusSidebarItems} path='/' />
     </ReqoreUIProvider>
   );
 
@@ -20,7 +20,7 @@ test('Sidebar can be collapsed', () => {
 
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={qorusSidebarItems}
         path='/'
         onCollapseChange={handleClick}
@@ -40,7 +40,7 @@ test('Sidebar can be collapsed', () => {
 test('Can open submenu manually', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar items={qorusSidebarItems} path='/' />
+      <ReqoreSidebar items={qorusSidebarItems} path='/' />
     </ReqoreUIProvider>
   );
 
@@ -53,7 +53,7 @@ test('Can open submenu manually', () => {
 test('Submenu opens automatically if path matches', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar items={qorusSidebarItems} path='/item-3/item-1' />
+      <ReqoreSidebar items={qorusSidebarItems} path='/item-3/item-1' />
     </ReqoreUIProvider>
   );
 
@@ -67,7 +67,7 @@ test('Bookmarks can be added and removed', () => {
 
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={qorusSidebarItems}
         path='/'
         onBookmarksChange={handleBookmarksChange}
@@ -93,12 +93,49 @@ test('Bookmarks can be added and removed', () => {
   expect(document.querySelectorAll('.sidebarSection').length).toBe(3);
 });
 
+test('Bookmarks clicks are not propagated through', () => {
+  const handleBookmarksChange = jest.fn();
+  const handleClick = jest.fn();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreSidebar
+        items={{
+          Menu: {
+            title: 'Menu',
+            items: [
+              {
+                name: 'Menu item 1',
+                as: 'p',
+                icon: 'home',
+                id: 'menu-item-1',
+                props: {
+                  onClick: handleClick,
+                },
+              },
+            ],
+          },
+        }}
+        path='/'
+        onBookmarksChange={handleBookmarksChange}
+      />
+    </ReqoreUIProvider>
+  );
+
+  const addBookmarkButton = document.querySelector('.favorite');
+
+  fireEvent.click(addBookmarkButton);
+
+  expect(handleBookmarksChange).toHaveBeenCalledWith(['menu-item-1']);
+  expect(handleClick).toHaveBeenCalledTimes(0);
+});
+
 test('Renders item as <p> element with onClick', () => {
   const handleItemClick = jest.fn();
 
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={{
           ...qorusSidebarItems,
           TestItems: {
@@ -107,7 +144,9 @@ test('Renders item as <p> element with onClick', () => {
               {
                 name: 'Test',
                 as: 'p',
-                onClick: handleItemClick,
+                props: {
+                  onClick: handleItemClick,
+                },
                 id: 'test-item-1',
                 icon: 'add',
               },
@@ -134,7 +173,7 @@ test('Renders item as <p> element with onClick', () => {
 test('Renders custom item at the top', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={qorusSidebarItems}
         path='/'
         customItems={[
diff --git a/jest.config.js b/jest.config.js
index dda04f40..9db8811f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,6 +3,8 @@ module.exports = {
   // `<rootDir>` is a token Jest substitutes
   roots: ['<rootDir>/__tests__'],
 
+  testMatch: ['<rootDir>/__tests__/**/*.test.(ts|tsx)'],
+
   // Jest transformations -- this adds support for TypeScript
   // using ts-jest
   transform: {
diff --git a/package.json b/package.json
index 1bcb1748..28fe14ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "ReQore is a UI library of components for Qorus connected apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -54,6 +54,7 @@
     "react-test-renderer": "^17.0.1",
     "styled-components": "^5.2.1",
     "ts-jest": "^26.4.4",
+    "ts-node": "^9.1.1",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
new file mode 100644
index 00000000..95e2b2a1
--- /dev/null
+++ b/src/components/Breadcrumbs/index.tsx
@@ -0,0 +1,169 @@
+import { Icon, IconName } from '@blueprintjs/core';
+import { isArray } from 'lodash';
+import React from 'react';
+import { useMeasure } from 'react-use';
+import styled, { css } from 'styled-components';
+import { ReqorePopover } from '../..';
+import { IReqoreTheme } from '../../constants/theme';
+import { getReadableColor } from '../../helpers/colors';
+import ReqoreMenu from '../Menu';
+import ReqoreMenuItem from '../Menu/item';
+import ReqoreBreadcrumbsItem, { IReqoreBreadcrumbItemProps } from './item';
+
+export interface IReqoreBreadcrumbItem {
+  tooltip?: JSX.Element | string;
+  label?: string;
+  icon?: IconName;
+  active?: boolean;
+  as?: any;
+  props?: React.HTMLAttributes<HTMLDivElement>;
+}
+
+export interface IReqoreBreadcrumbsProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  items: IReqoreBreadcrumbItem[];
+  rightElement?: JSX.Element;
+  // Internal prop, ignore!
+  _testWidth?: number;
+}
+
+const StyledReqoreBreadcrumbs = styled.div<{ theme: IReqoreTheme }>`
+  ${({ theme }) => css`
+    width: 100%;
+    height: 50px;
+    display: flex;
+    padding: 0 15px;
+    justify-content: space-between;
+
+    > div {
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      > * {
+        color: ${theme.breadcrumbs?.item?.color ||
+        theme.breadcrumbs?.main ||
+        getReadableColor(theme.main, undefined, undefined, true)};
+      }
+
+      &:first-child {
+        overflow: hidden;
+        flex: 1;
+      }
+    }
+  `}
+`;
+
+const getBreadcrumbsLength = (
+  items: (IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[])[]
+): number =>
+  items.reduce((len, item) => {
+    if (isArray(item)) {
+      return len + 50;
+    }
+
+    return len + 27 + item.label.length * 10 + 35;
+  }, 0);
+
+const getTransformedItems = (
+  items: (IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[])[],
+  width: number
+): (IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[])[] => {
+  if (!width) {
+    return items;
+  }
+  let newItems = [...items];
+
+  while (getBreadcrumbsLength(newItems) > width) {
+    if (isArray(newItems[1])) {
+      newItems[1].push(newItems[2] as IReqoreBreadcrumbItem);
+      newItems[2] = undefined;
+    } else {
+      const secondItem = newItems[1];
+      newItems[1] = [secondItem];
+    }
+
+    newItems = newItems.filter((i) => i);
+  }
+
+  return newItems;
+};
+
+const ReqoreBreadcrumbs = ({
+  items,
+  rightElement,
+  _testWidth,
+  ...rest
+}: IReqoreBreadcrumbsProps) => {
+  const [ref, { width }] = useMeasure();
+
+  const transformedItems = getTransformedItems(items, _testWidth || width);
+
+  return (
+    <StyledReqoreBreadcrumbs
+      {...rest}
+      className={`${rest.className || ''} reqore-breadcrumbs-wrapper`}
+      ref={ref}
+    >
+      <div key='reqore-breadcrumbs-left-wrapper'>
+        {transformedItems.map(
+          (
+            item: IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[],
+            index: number
+          ) =>
+            isArray(item) ? (
+              <React.Fragment key={index}>
+                <Icon icon='chevron-right' iconSize={12} key={'icon' + index} />
+                <ReqorePopover
+                  key={index}
+                  component={ReqoreBreadcrumbsItem}
+                  componentProps={
+                    {
+                      icon: 'more',
+                      tooltip: 'Show more...',
+                      interactive: true,
+                    } as IReqoreBreadcrumbItemProps
+                  }
+                  handler='click'
+                  content={
+                    <ReqoreMenu>
+                      {item.map(({ icon, label, as, tooltip, props }) => (
+                        <ReqorePopover
+                          component={ReqoreMenuItem}
+                          componentProps={{
+                            icon,
+                            as,
+                            ...props,
+                          }}
+                          placement='right'
+                          isReqoreComponent
+                          content={tooltip}
+                          key={index + label}
+                        >
+                          {label}
+                        </ReqorePopover>
+                      ))}
+                    </ReqoreMenu>
+                  }
+                />
+              </React.Fragment>
+            ) : (
+              <React.Fragment key={index}>
+                {index !== 0 && (
+                  <Icon
+                    icon='chevron-right'
+                    iconSize={12}
+                    key={'icon' + index}
+                  />
+                )}
+                <ReqoreBreadcrumbsItem {...item} key={index} />
+              </React.Fragment>
+            )
+        )}
+      </div>
+      {rightElement && <div>{rightElement}</div>}
+    </StyledReqoreBreadcrumbs>
+  );
+};
+
+export default ReqoreBreadcrumbs;
diff --git a/src/components/Breadcrumbs/item.tsx b/src/components/Breadcrumbs/item.tsx
new file mode 100644
index 00000000..b3f18d1c
--- /dev/null
+++ b/src/components/Breadcrumbs/item.tsx
@@ -0,0 +1,119 @@
+import { Icon } from '@blueprintjs/core';
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreBreadcrumbItem } from '.';
+import { IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import {
+  changeDarkness,
+  changeLightness,
+  getReadableColor,
+} from '../../helpers/colors';
+import usePopover from '../../hooks/usePopover';
+
+export interface IReqoreBreadcrumbItemProps extends IReqoreBreadcrumbItem {
+  interactive?: boolean;
+}
+
+export interface IReqoreBreadcrumbItemStyle {
+  theme: IReqoreTheme;
+  active?: boolean;
+  interactive?: boolean;
+}
+
+const StyledBreadcrumbItem = styled.div<IReqoreBreadcrumbItemStyle>`
+  ${({ theme, active, interactive }: IReqoreBreadcrumbItemStyle) => {
+    const textColor =
+      theme.breadcrumbs?.item?.color ||
+      theme.breadcrumbs?.main ||
+      getReadableColor(theme.main, undefined, undefined, true);
+
+    return css`
+      display: flex;
+      height: 100%;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 0 5px;
+      transition: background-color 0.15s linear;
+
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      font-size: 12px;
+      font-weight: 450;
+
+      * {
+        color: ${textColor};
+      }
+
+      ${active &&
+      css`
+        * {
+          font-weight: 700;
+          color: ${theme.breadcrumbs?.item?.activeColor ||
+          changeDarkness(theme.breadcrumbs?.main, 0.05) ||
+          getReadableColor(theme.main, undefined, undefined)};
+        }
+      `}
+
+      ${interactive &&
+      css`
+        cursor: pointer;
+        &:hover {
+          color: ${theme.breadcrumbs?.item?.hoverColor ||
+          changeDarkness(theme.breadcrumbs?.main, 0.05) ||
+          getReadableColor(theme.main, undefined, undefined)};
+          background-color: ${changeLightness(theme.main, 0.1)};
+        }
+      `}
+
+    a:hover {
+        color: ${theme.breadcrumbs?.item?.hoverColor ||
+        changeDarkness(theme.breadcrumbs?.main, 0.05) ||
+        getReadableColor(theme.main, undefined, undefined)};
+      }
+    `;
+  }}
+
+  > *:first-child:not(:last-child) {
+    margin-right: 5px;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const ReqoreBreadcrumbsItem = ({
+  tooltip,
+  label,
+  props,
+  icon,
+  active,
+  as,
+  interactive,
+}: IReqoreBreadcrumbItemProps) => {
+  const [ref, setRef] = useState(null);
+  const Element: any = as || 'div';
+
+  usePopover(ref, tooltip, undefined, undefined, !!tooltip);
+
+  return (
+    <ReqoreThemeProvider>
+      <StyledBreadcrumbItem
+        ref={setRef}
+        active={active}
+        interactive={interactive || !!props?.onClick}
+        className='reqore-breadcrumbs-item'
+      >
+        {icon && <Icon icon={icon} iconSize={12} />}
+        {label && <Element {...props}>{label}</Element>}
+      </StyledBreadcrumbItem>
+    </ReqoreThemeProvider>
+  );
+};
+
+export default ReqoreBreadcrumbsItem;
diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index 1a46dd84..dd8574a0 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -14,14 +14,6 @@ export interface IReqoreContentStyle {
   theme: IReqoreTheme;
 }
 
-const StyledReqoreContentWrapper = styled.div<IReqoreContentStyle>`
-  display: flex;
-  flex-flow: column;
-  flex: 1;
-  padding: 15px;
-  overflow: hidden;
-`;
-
 const StyledReqoreContent = styled.div<IReqoreContentStyle>`
   ${({ theme }: IReqoreContentStyle) => css`
     display: flex;
@@ -32,21 +24,20 @@ const StyledReqoreContent = styled.div<IReqoreContentStyle>`
     padding: 10px;
     box-shadow: 0 0 4px 1px ${darken(0.1, theme.main)};
     overflow: auto;
+    margin: 0 15px 15px 15px;
   `}
 `;
 
 const ReqoreContent = forwardRef(
   ({ children, className, ...rest }: IReqoreContentWrapperProps, ref: any) => (
     <ReqoreThemeProvider>
-      <StyledReqoreContentWrapper>
-        <StyledReqoreContent
-          {...rest}
-          ref={ref}
-          className={`${className || ''} reqore-content`}
-        >
-          {children}
-        </StyledReqoreContent>
-      </StyledReqoreContentWrapper>
+      <StyledReqoreContent
+        {...rest}
+        ref={ref}
+        className={`${className || ''} reqore-content`}
+      >
+        {children}
+      </StyledReqoreContent>
     </ReqoreThemeProvider>
   )
 );
diff --git a/src/components/Content/wrapper.tsx b/src/components/Content/wrapper.tsx
new file mode 100644
index 00000000..f613de50
--- /dev/null
+++ b/src/components/Content/wrapper.tsx
@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+
+export interface IReqoreContentWrapperProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+}
+
+export interface IReqoreContentStyle {
+  theme: IReqoreTheme;
+}
+
+const StyledReqoreContentWrapper = styled.div<IReqoreContentStyle>`
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+  padding: 15px;
+  overflow: hidden;
+`;
+
+const ReqoreContentWrapper = forwardRef(
+  ({ children, className, ...rest }: IReqoreContentWrapperProps, ref: any) => (
+    <ReqoreThemeProvider>
+      <StyledReqoreContentWrapper
+        {...rest}
+        ref={ref}
+        className={`${className || ''} reqore-content-wrapper`}
+      >
+        {children}
+      </StyledReqoreContentWrapper>
+    </ReqoreThemeProvider>
+  )
+);
+
+export default ReqoreContentWrapper;
diff --git a/src/components/Menu/item.tsx b/src/components/Menu/item.tsx
index 54e87c2b..f4962776 100644
--- a/src/components/Menu/item.tsx
+++ b/src/components/Menu/item.tsx
@@ -12,7 +12,7 @@ export interface IReqoreMenuItemProps
   children?: any;
   icon?: IconName;
   rightIcon?: IconName;
-  as?: JSX.Element | React.ElementType;
+  as?: JSX.Element | React.ElementType | never;
   selected?: boolean;
 }
 
@@ -51,6 +51,11 @@ const StyledElement = styled.div<{ theme: IReqoreTheme; selected: boolean }>`
       }
     `}
 
+  &:hover {
+    color: ${({ theme }) => getReadableColor(theme.main, undefined, undefined)};
+    text-decoration: none;
+  }
+
   &:not(:first-child) {
     margin-top: 4px;
   }
@@ -61,6 +66,8 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
     return (
       <ReqoreThemeProvider>
         <StyledElement
+          //@ts-ignore
+          as={as}
           className='reqore-menu-item'
           {...rest}
           onClick={(event) => {
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index a4772680..609d2565 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -30,9 +30,8 @@ export interface IQorusSidebarItems {
 
 export interface IQorusSidebarItem {
   name: string;
-  link?: string;
+  props?: any;
   activePaths?: string[];
-  onClick?: () => any;
   submenu?: IQorusSidebarItem[];
   id: string;
   as?: JSX.Element | string;
@@ -303,7 +302,7 @@ const StyledDivider = styled.div<{ theme?: any; hasTitle?: boolean }>`
   color: inherit;
 `;
 
-const QorusSidebar: React.FC<IQorusSidebarProps> = ({
+const ReqoreSidebar: React.FC<IQorusSidebarProps> = ({
   isCollapsed,
   onCollapseChange,
   path,
@@ -423,4 +422,4 @@ const QorusSidebar: React.FC<IQorusSidebarProps> = ({
   );
 };
 
-export default QorusSidebar;
+export default ReqoreSidebar;
diff --git a/src/components/Sidebar/item.tsx b/src/components/Sidebar/item.tsx
index 2d569797..ac95d7ae 100644
--- a/src/components/Sidebar/item.tsx
+++ b/src/components/Sidebar/item.tsx
@@ -55,13 +55,13 @@ const SidebarItemTooltip: Function = ({
     <ReqorePopover
       component={Element}
       componentProps={{
+        ...itemData.props,
+        onClick: itemData.props?.onClick || onClick,
         className: classnames('sidebarItem', 'sidebarLink', {
           sidebarSubItem: isSubitem,
           active: isActive,
           submenuCategory: isSubcategory,
         }),
-        onClick: itemData.onClick || onClick,
-        to: itemData.link,
       }}
       content={itemData.name}
       placement='right'
@@ -87,7 +87,9 @@ const SidebarItem: Function = ({
   hasFavorites,
 }: SidebarItemProps) => {
   const handleFavoriteClick = (event) => {
+    event.persist();
     event.stopPropagation();
+    event.preventDefault();
 
     if (onFavoriteClick) {
       onFavoriteClick(itemData.id);
@@ -95,7 +97,9 @@ const SidebarItem: Function = ({
   };
 
   const handleUnfavoriteClick = (event) => {
+    event.persist();
     event.stopPropagation();
+    event.preventDefault();
 
     if (onUnfavoriteClick) {
       onUnfavoriteClick(itemData.id);
@@ -103,7 +107,7 @@ const SidebarItem: Function = ({
   };
 
   const isActive = isActiveMulti(
-    itemData.activePaths || [itemData.link],
+    itemData.activePaths || [itemData.props?.href],
     currentPath,
     itemData.exact
   );
@@ -175,7 +179,7 @@ const SidebarItemWrapper: Function = ({
     if (
       !itemData.element &&
       isActiveMulti(
-        itemData.activePaths || [itemData.link],
+        itemData.activePaths || [itemData.props?.href],
         currentPath,
         itemData.exact
       )
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
index e4a28605..df9d676e 100644
--- a/src/constants/colors.ts
+++ b/src/constants/colors.ts
@@ -1,4 +1,4 @@
 export const Colors = {
-  DARK: '#333333',
-  LIGHT: '#fefefe',
+  DARK: '#000000',
+  LIGHT: '#ffffff',
 };
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
index f358e894..7ae5ff22 100644
--- a/src/constants/theme.ts
+++ b/src/constants/theme.ts
@@ -55,6 +55,14 @@ export interface IReqoreTheme {
     background?: string;
     hoverColor?: string;
   };
+  breadcrumbs?: {
+    main?: string;
+    item?: {
+      color?: string;
+      hoverColor?: string;
+      activeColor?: string;
+    };
+  };
 }
 
 export interface IReqoreThemeNotification {
diff --git a/src/helpers/colors.ts b/src/helpers/colors.ts
index 71eba0dc..bf3e4102 100644
--- a/src/helpers/colors.ts
+++ b/src/helpers/colors.ts
@@ -7,12 +7,12 @@ export const getReadableColor: (
   ifLight?: string,
   ifDark?: string,
   dimmed?: boolean
-) => string = (from, ifLight, ifDark, dimmed) =>
-  readableColor(
-    from,
-    ifLight || dimmed ? lighten(0.1, Colors.DARK) : Colors.DARK,
-    ifDark || dimmed ? darken(0.1, Colors.LIGHT) : Colors.LIGHT
-  );
+) => string = (from, ifLight, ifDark, dimmed) => {
+  const returnIfLight = ifLight || lighten(dimmed ? 0.2 : 0, Colors.DARK);
+  const returnIfDark = ifDark || darken(dimmed ? 0.1 : 0, Colors.LIGHT);
+
+  return readableColor(from, returnIfLight, returnIfDark, false);
+};
 
 export const shouldDarken = (mainColor: string) => {
   const contrast = getColorByBgColor(mainColor);
@@ -29,7 +29,21 @@ export const changeLightness: (color: string, lightness: number) => string = (
   color,
   lightness
 ) =>
-  shouldDarken(color) ? darken(lightness, color) : lighten(lightness, color);
+  color
+    ? shouldDarken(color)
+      ? darken(lightness, color)
+      : lighten(lightness, color)
+    : undefined;
+
+export const changeDarkness: (color: string, lightness: number) => string = (
+  color,
+  lightness
+) =>
+  color
+    ? shouldDarken(color)
+      ? lighten(lightness, color)
+      : darken(lightness, color)
+    : undefined;
 
 export const getColorByBgColor = (bgColor) => {
   if (!bgColor) {
diff --git a/src/index.tsx b/src/index.tsx
index ba7e1b08..192b523d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,7 @@
 import '@blueprintjs/core/lib/css/blueprint.css';
 
+export { default as ReqoreBreadcrumbs } from './components/Breadcrumbs';
+export { default as ReqoreBreadcrumbsItem } from './components/Breadcrumbs/item';
 export { default as ReqoreContent } from './components/Content';
 export { default as ReqoreLayoutContent } from './components/Layout/content';
 export { default as ReqoreMenu } from './components/Menu';
@@ -12,7 +14,7 @@ export { default as ReqoreNavbarItem } from './components/Navbar/item';
 export { default as ReqoreNotificationsWrapper } from './components/Notifications';
 export { default as ReqoreNotification } from './components/Notifications/notification';
 export { default as ReqorePopover } from './components/Popover';
-export { default as QorusSidebar } from './components/Sidebar';
+export { default as ReqoreSidebar } from './components/Sidebar';
 export { default as ReqoreNotifications } from './containers/NotificationsProvider';
 export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreNotificationsContext } from './context/NotificationContext';
diff --git a/src/mock/menu.ts b/src/mock/menu.ts
index aa1b04bc..fc893cc5 100644
--- a/src/mock/menu.ts
+++ b/src/mock/menu.ts
@@ -7,14 +7,18 @@ export const qorusSidebarItems: IQorusSidebarItems = {
       {
         name: 'Menu item 1',
         as: 'a',
-        link: '/item-1',
+        props: {
+          href: '/item-1',
+        },
         icon: 'home',
         id: 'menu-item-1',
       },
       {
         name: 'Menu item 2',
         as: 'a',
-        link: '/item-2',
+        props: {
+          href: '/item-2',
+        },
         icon: 'cog',
         id: 'menu-item-2',
       },
@@ -27,21 +31,27 @@ export const qorusSidebarItems: IQorusSidebarItems = {
           {
             name: 'Submenu item 1',
             as: 'a',
-            link: '/item-3/item-1',
+            props: {
+              href: '/item-3/item-1',
+            },
             icon: 'tree',
             id: 'submenu-item-1',
           },
           {
             name: 'Submenu item 2',
             as: 'a',
-            link: '/item-3/item-2',
+            props: {
+              href: '/item-3/item-2',
+            },
             icon: 'chat',
             id: 'submenu-item-2',
           },
           {
             name: 'Super really long Submenu item 3',
             as: 'a',
-            link: '/item-3/item-3',
+            props: {
+              href: '/item-3/item-3',
+            },
             icon: 'database',
             id: 'submenu-item-3',
           },
@@ -54,21 +64,29 @@ export const qorusSidebarItems: IQorusSidebarItems = {
       {
         name: 'Super Long Really Another item 1',
         as: 'a',
-        link: '/another-item-1',
+        props: {
+          href: '/another-item-1',
+        },
         icon: 'home',
         id: 'another-item-1',
       },
       {
         name: 'Another item 2',
         as: 'a',
-        link: '/another-item-2',
+        props: {
+          href: '/another-item-2',
+        },
         icon: 'cog',
         id: 'another-item-2',
       },
       {
         name: 'Another item 3',
         as: 'a',
-        link: '/another-item-3',
+        props: {
+          onClick: () => {
+            alert('Click');
+          },
+        },
         icon: 'document',
         id: 'another-item-3',
       },
diff --git a/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx b/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx
new file mode 100644
index 00000000..f8f99ac2
--- /dev/null
+++ b/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -0,0 +1,131 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+import { IReqoreBreadcrumbsProps } from '../../components/Breadcrumbs';
+import { ReqoreFooter } from '../../components/Navbar';
+import { IReqoreTheme } from '../../constants/theme';
+import {
+  ReqoreBreadcrumbs,
+  ReqoreContent,
+  ReqoreHeader,
+  ReqoreLayoutContent,
+  ReqoreMenu,
+  ReqoreMenuItem,
+  ReqoreUIProvider,
+} from '../../index';
+
+export default {
+  title: 'ReQore/Breadcrumbs',
+  args: {
+    theme: {
+      main: '#ffffff',
+    },
+    breadcrumbs: {
+      items: [
+        {
+          label: 'Page 1',
+          icon: 'home',
+          tooltip: 'Hooooooome!',
+        },
+        {
+          label: 'Page 2',
+          icon: 'cog',
+          as: 'a',
+          props: {
+            href: 'https://google.com',
+          },
+        },
+        {
+          label: 'Page 3',
+          icon: 'notifications',
+          tooltip: 'Click to go to page 3!',
+        },
+        {
+          label: 'Page 4',
+          icon: 'notifications',
+        },
+        {
+          label: 'Page 5',
+          icon: 'notifications',
+        },
+        {
+          label: 'Page 6',
+          icon: 'notifications',
+        },
+        {
+          label: 'Page 7',
+          icon: 'notifications',
+        },
+        {
+          label: 'Page 8',
+          icon: 'notifications',
+        },
+        {
+          label: 'Page 9',
+          icon: 'notifications',
+          active: true,
+        },
+      ],
+      rightElement: (
+        <ReqoreMenu>
+          <ReqoreMenuItem icon='person'>Right Element</ReqoreMenuItem>
+        </ReqoreMenu>
+      ),
+    },
+  },
+} as Meta;
+
+const Template: Story<{
+  theme: IReqoreTheme;
+  breadcrumbs: IReqoreBreadcrumbsProps;
+}> = ({
+  theme,
+  breadcrumbs,
+}: {
+  theme: IReqoreTheme;
+  breadcrumbs: IReqoreBreadcrumbsProps;
+}) => {
+  return (
+    <ReqoreUIProvider theme={theme}>
+      <ReqoreLayoutContent>
+        <ReqoreHeader></ReqoreHeader>
+        <ReqoreBreadcrumbs {...breadcrumbs} />
+        <ReqoreContent>
+          <h3>Hello</h3>
+        </ReqoreContent>
+        <ReqoreFooter></ReqoreFooter>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+};
+
+export const Default = Template.bind({});
+export const Dark = Template.bind({});
+Dark.args = {
+  theme: {
+    main: '#222222',
+  },
+};
+
+export const CustomMainColor = Template.bind({});
+CustomMainColor.args = {
+  theme: {
+    main: '#ffffff',
+    breadcrumbs: {
+      main: '#194d5d',
+    },
+  },
+};
+
+export const CustomColors = Template.bind({});
+CustomColors.args = {
+  theme: {
+    main: '#ffffff',
+    breadcrumbs: {
+      item: {
+        color: '#7532a8',
+        hoverColor: '#5932a8',
+        activeColor: '#323aa8',
+      },
+    },
+  },
+};
diff --git a/src/stories/Layout/Layout.stories.tsx b/src/stories/Layout/Layout.stories.tsx
index c3fee23d..10ec37f7 100644
--- a/src/stories/Layout/Layout.stories.tsx
+++ b/src/stories/Layout/Layout.stories.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import { ReqoreFooter } from '../../components/Navbar';
 import { IReqoreUIProviderProps } from '../../containers/UIProvider';
 import {
-  QorusSidebar,
   ReqoreContent,
   ReqoreHeader,
   ReqoreLayoutContent,
+  ReqoreSidebar,
   ReqoreUIProvider,
 } from '../../index';
 import { qorusSidebarItems } from '../../mock/menu';
@@ -25,7 +25,7 @@ const Template: Story<IReqoreUIProviderProps> = (
 ) => {
   return (
     <ReqoreUIProvider {...args}>
-      {args.withSidebar && <QorusSidebar items={qorusSidebarItems} path='/' />}
+      {args.withSidebar && <ReqoreSidebar items={qorusSidebarItems} path='/' />}
       <ReqoreLayoutContent>
         <ReqoreHeader></ReqoreHeader>
         <h2> I am a header ! </h2>
diff --git a/src/stories/Sidebar/Sidebar.stories.tsx b/src/stories/Sidebar/Sidebar.stories.tsx
index b85d6c17..8b29ead3 100644
--- a/src/stories/Sidebar/Sidebar.stories.tsx
+++ b/src/stories/Sidebar/Sidebar.stories.tsx
@@ -2,12 +2,12 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';
 import { IQorusSidebarProps } from '../../components/Sidebar';
 import { IReqoreUIProviderProps } from '../../containers/UIProvider';
-import { QorusSidebar, ReqoreUIProvider } from '../../index';
+import { ReqoreSidebar, ReqoreUIProvider } from '../../index';
 import { qorusSidebarItems } from '../../mock/menu';
 
 export default {
   title: 'ReQore/Sidebar',
-  component: QorusSidebar,
+  component: ReqoreSidebar,
   args: {
     items: qorusSidebarItems,
     path: '/',
@@ -21,7 +21,7 @@ const Template: Story<IQorusSidebarProps & IReqoreUIProviderProps> = ({
   ...args
 }: IQorusSidebarProps & IReqoreUIProviderProps) => (
   <ReqoreUIProvider theme={theme}>
-    <QorusSidebar {...args} />
+    <ReqoreSidebar {...args} />
   </ReqoreUIProvider>
 );
 
diff --git a/yarn.lock b/yarn.lock
index 59e30f02..7db52d6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3036,6 +3036,11 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -4643,6 +4648,11 @@ create-react-context@0.3.0, create-react-context@^0.3.0:
     gud "^1.0.0"
     warning "^4.0.3"
 
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
 cross-spawn@7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
@@ -8344,7 +8354,7 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-error@1.x:
+make-error@1.x, make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -11466,7 +11476,7 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.5.11, source-map-support@^0.5.16, source-map-support@^0.5.19, source-map-support@^0.5.6, source-map-support@^0.5.7, source-map-support@~0.5.12:
+source-map-support@^0.5.11, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@^0.5.19, source-map-support@^0.5.6, source-map-support@^0.5.7, source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -12301,6 +12311,18 @@ ts-jest@^26.4.4:
     semver "7.x"
     yargs-parser "20.x"
 
+ts-node@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-9.1.1.tgz#51a9a450a3e959401bda5f004a72d54b936d376d"
+  integrity sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==
+  dependencies:
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    source-map-support "^0.5.17"
+    yn "3.1.1"
+
 ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -13129,6 +13151,11 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"