antdesign

Breadcrumb

Navigation 3

About

Here is Breadcrumb component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumb to your project and fits it to your theme.

Code

How Breadcrumb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb } from 'antd';

const App: React.FC = () => (
  <Breadcrumb
    items={[
      {
        href: '',
        title: <HomeOutlined />,
      },
      {
        href: '',
        title: (
          <>
            <UserOutlined />
            <span>Application List</span>
          </>
        ),
      },
      {
        title: 'Application',
      },
    ]}
  />
);

export default App;

Dependencies

More by antdesign

View all
  • Menu

    Menu

    22
  • Pagination Ant

    Pagination Ant

    16
  • Dropdown

    Dropdown

    15
  • FloatButton

    FloatButton

    7
  • Button Ant

    Button Ant

    5
  • Floating Action Menu

    Floating Action Menu

More in Navigation

View all
  • Sidebar

    Sidebar

    274
  • Tabs

    Tabs

    63
  • Breadrcrumb

    Breadrcrumb

    5
  • Stacked Circular Footer

    Stacked Circular Footer

    423
  • NavBar

    NavBar

  • Navbar

    Navbar

  • Oversized 404 Numeral

    Oversized 404 Numeral

    56
  • Footer 2

    Footer 2

    210