Below is an interactive React Breadcrumb component for navigating nested objects. It uses emojis for a fun learning experience:
Explanation
- 🏠 Home: Clicking resets to the top level.
- 👉 Breadcrumb Items: Each breadcrumb (key) is clickable to navigate back to that level.
- 📂 Keys List: When at an object, keys are shown as a list. Clicking a key drills down.
- 📄 Value Display: When a non-object value is reached, it’s shown with a file emoji.
Code
import React, { useState } from 'react'; const Breadcrumbs = ({ data }) => { // "path" holds the keys to navigate the nested object const [path, setPath] = useState([]); // Get current nested value using the path const currentData = path.reduce((acc, key) => acc && acc[key], data); // Navigate back to a specific breadcrumb level const handleClick = (index) => setPath(path.slice(0, index + 1)); // Drill down by adding a key to the current path const handleDrillDown = (key) => { if (currentData && typeof currentData === 'object') { setPath([...path, key]); } }; return ( <div style={{ fontFamily: "sans-serif", padding: "20px" }}> {/* Breadcrumb Navigation */} <div style={{ marginBottom: "15px", fontSize: "1.2em" }}> <span onClick={() => setPath([])} style={{ cursor: "pointer" }}> 🏠 Home </span> {path.map((key, index) => ( <span key={index}> {" "} 👉{" "} <span onClick={() => handleClick(index)} style={{ cursor: "pointer" }}> {key} </span> </span> ))} </div> {/* Content Display */} <div> {currentData && typeof currentData === "object" ? ( <ul style={{ listStyleType: "none", paddingLeft: 0 }}> {Object.keys(currentData).map((key) => ( <li key={key} onClick={() => handleDrillDown(key)} style={{ cursor: "pointer", margin: "5px 0" }}> 📂 {key} </li> ))} </ul> ) : ( <div style={{ fontSize: "1.2em" }}>📄 {currentData !== undefined ? currentData : "No data"}</div> )} </div> </div> ); }; export default Breadcrumbs;
Usage Example
import React from 'react'; import ReactDOM from 'react-dom'; import Breadcrumbs from './Breadcrumbs'; const nestedData = { Fruits: { Citrus: { Orange: "Sweet and juicy 🍊", Lemon: "Sour and zesty 🍋" }, Berries: { Strawberry: "Red and delicious 🍓", Blueberry: "Small and mighty 🫐" } }, Vegetables: { Leafy: { Spinach: "Healthy and green 🥬", Lettuce: "Great for salads 🥗" }, Root: { Carrot: "Crunchy and sweet 🥕" } } }; ReactDOM.render(<Breadcrumbs data={nestedData} />, document.getElementById('root'));
This component is reusable and interactive—perfect for learning nested object navigation while having a bit of emoji fun!
Interactive Demo
import React, { useState } from 'react'; const Breadcrumbs = ({ data }) => { // "path" holds the keys to navigate the nested object const [path, setPath] = useState([]); // Get current nested value using the path const currentData = path.reduce((acc, key) => acc && acc[key], data); // Navigate back to a specific breadcrumb level const handleClick = (index) => setPath(path.slice(0, index + 1)); // Drill down by adding a key to the current path const handleDrillDown = (key) => { if (currentData && typeof currentData === 'object') { setPath([...path, key]); } }; return ( <div className="bg-gray-100 p-5 rounded-lg max-w-md mx-auto"> {/* Breadcrumb Navigation */} <div className="mb-4 text-lg"> <span onClick={() => setPath([])} className="cursor-pointer hover:text-blue-600 transition" > 🏠 Home </span> {path.map((key, index) => ( <span key={index}> {" "} 👉{" "} <span onClick={() => handleClick(index)} className="cursor-pointer hover:text-blue-600 transition" > {key} </span> </span> ))} </div> {/* Content Display */} <div> {currentData && typeof currentData === "object" ? ( <ul className="list-none pl-0"> {Object.keys(currentData).map((key) => ( <li key={key} onClick={() => handleDrillDown(key)} className="cursor-pointer my-2 p-2 bg-white rounded hover:bg-blue-50 transition" > 📂 {key} </li> ))} </ul> ) : ( <div className="text-lg font-semibold"> 📄 {currentData !== undefined ? currentData : "No data"} </div> )} </div> </div> ); }; // Sample nested data structure const sampleData = { "User Profile": { "Personal Info": { "Name": "John Doe", "Age": 30, "Email": "john.doe@example.com" }, "Address": { "Street": "123 Main St", "City": "Anytown", "Country": "USA" } }, "Work Details": { "Company": "Tech Innovations Inc.", "Position": "Senior Developer", "Department": { "Name": "Engineering", "Team": "Web Development" } }, "Hobbies": { "Sports": ["Hiking", "Cycling"], "Music": "Playing Guitar", "Reading": ["Science Fiction", "Technology Books"] } }; // App component to demonstrate the Breadcrumbs const App = () => { return ( <div className="p-6"> <h1 className="text-2xl font-bold mb-4">Interactive Nested Data Explorer</h1> <Breadcrumbs data={sampleData} /> </div> ); }; export default App;
Here’s a mnemonic + visual metaphor to help you remember how to implement a breadcrumb component for nested objects:
📌 Mnemonic: "BREAD"
B – Break the object using a path array (e.g., ['Home', 'Products'])
R – Render the path as clickable segments
E – Extract children from the nested object using reduce
A – Allow navigation by slicing the path
D – Drill-down by appending keys to the path on click
🧠 Visual Metaphor
Think of the object like a folder tree , and the breadcrumb is just a GPS trail — every time you go deeper, you're adding a breadcrumb to your trail. Clicking a breadcrumb takes you back to a previous node in the tree.
🧩 Mental Model
Object Tree ←→ Path Array ←→ Breadcrumb UI --------------------------------------------------------------- data ←→ ['Home', 'Products'] ←→ Home / Products ↓ ↑ drill using reduce build from array
🏗️ Remember the Core Pattern
Object + Path[] + Reduce + Render path as links
That’s all a breadcrumb for nested objects really is.
Want me to generate a flashcard version or a diagram to make it stick even harder?
Quick Quiz
Test your understanding with 3 quick questions
Q1What JavaScript method is used to traverse the nested object based on the path array?
Q2When a user clicks on a breadcrumb item at index 2, what happens to the path array?
Q3What is the purpose of returning `acc && acc[key]` in the reduce function?