Breadcrumb

Breadcrumbs are the list of links, showing your current page on the site and letting the user navigate back.

Basic

Source Code

import { Breadcrumb } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { breadcrumbOptions } from '../../utils/Breadcrumb/helpers';

export const BreadcrumbBasic = () => {
  const items = React.useMemo(() => breadcrumbOptions('basic'), []);
  return <Breadcrumb items={items} />;
};

Sizes

Breadcrumb supports 3 sizes sm, md and lg and can be changed by passing the size prop.
Default size is lg.

Size: sm

Size: md

Size: lg

Source Code

import { Breadcrumb, BreadcrumbProps, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { breadcrumbOptions } from '../../utils/Breadcrumb/helpers';

export const BreadcrumbSizes = () => {
  const items = React.useMemo(() => breadcrumbOptions('sizes'), []);

  return (
    <div>
      {['sm', 'md', 'lg'].map((size) => (
        <div className="mb-4" key={size}>

With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Source Code

import { Breadcrumb } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { breadcrumbOptions } from '../../utils/Breadcrumb/helpers';

export const BreadcrumbSizeResponsive = () => {
  const items = React.useMemo(() => breadcrumbOptions('sizes'), []);
  return <Breadcrumb items={items} size="responsive" />;
};

Limit render items

Breadcrumb supports limiting the number of items to render by passing the limit prop.
Minimum limit is 2.

Limit: 2

Limit: 4

Source Code

import { Breadcrumb, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { breadcrumbOptions } from '../../utils/Breadcrumb/helpers';

export const BreadcrumbLimitRenderItems = () => {
  const items = React.useMemo(() => breadcrumbOptions('limit-render-items', 6), []);

  return (
    <div>
      {[{ limit: 2 }, { limit: 4 }].map(({ limit }) => (
        <div className="mb-4" key={limit}>

With Icon

Breadcrumb supports showing an ButtonIcon for the last item by setting the icon prop.
with icon props, you can pass the onClick event handler to the icon component to handle the click event.

Source Code

import { LinkOutline } from '@ocean-network-express/magenta-ui/icons';
import { Breadcrumb } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { breadcrumbOptions } from '../../utils/Breadcrumb/helpers';

export const BreadcrumbWithIcon = () => {
  const items = React.useMemo(() => breadcrumbOptions('with-icon'), []);

  return (
    <Breadcrumb
      icon={

Plain Text Items

Provide the label property without an href to display a breadcrumb item as static text instead of a link.

Source Code

import { Breadcrumb } from '@ocean-network-express/magenta-ui/react';

export const BreadcrumbPlainTextItems = () => {
  return (
    <Breadcrumb
      items={[
        {
          label: 'Breadcrumb Level 1',
        },
        {
          label: 'Breadcrumb Level 2',
          href: '#plain-text-items?uuid=2-asc21C',

TypeScript

BreadcrumbItemValueProps type exported from @ocean-network-express/magenta-ui/react.

Source Code

import { type BreadcrumbItemValueProps } from '@ocean-network-express/magenta-ui/react';
  const items: BreadcrumbItemValueProps[] = [
    { label: 'Home', href: '/' },
    { label: 'Level 1', href: '/level1' },
    { label: 'Level 2', href: '/level2' },
  ];
  function App() {
    return (
      <Breadcrumb items={items} />
    );
  }

Was this page helpful?