ninegrid2 6.912.0 → 6.913.0

package/dist/bundle.cjs.js

@@ -121646,31 +121646,160 @@ class nxForm extends HTMLElement {
 customElements.define("nx-form", nxForm);
 
 class nxTitle extends HTMLElement {
+
+	#breadcrumbPath = [];		// Breadcrumb 경로를 저장할 내부 상태 초기화
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
-		this.#randerer();
+		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
+		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 	}
 
-	#randerer = () => {
+	// Breadcrumb 경로를 구성하는 비공개 메서드
+	#generateBreadcrumb = () => {
+		const path = ["Home"]; // 기본 경로 시작은 Home
+
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
+		const currentPageCaption = this.getAttribute("caption") || "Current Page";
+
+		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
+		const activeMenuItem = document.querySelector('nx-side-menu-item.active');
+
+		if (activeMenuItem) {
+			const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
+
+			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
+			const currentActiveCaption = activeMenuItem.getAttribute('caption');
+			if (currentActiveCaption) {
+				tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
+			}
+
+			// 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
+			//    그 이전에 있는 'group' 메뉴(예: '자료관리')를 찾습니다.
+			let currentElement = activeMenuItem;
+			let foundGroupParent = false;    // '자료관리' 그룹을 찾았는지 여부
+
+			// activeMenuItem부터 이전 형제들을 역으로 탐색
+			while (currentElement) {
+				// 현재 activeMenuItem이 'group' 속성이 없는 일반 메뉴일 경우,
+				// 바로 그 자체가 두 번째 레벨 메뉴(예: '심의자료')의 역할을 합니다.
+				// 이미 activeMenuItem의 캡션은 추가되었으므로 여기서는 건너뜁니다.
+
+				// 이전 형제 탐색
+				currentElement = currentElement.previousElementSibling;
+
+				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
+					const caption = currentElement.getAttribute('caption');
+
+					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
+					if (currentElement.hasAttribute('group')) {
+						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
+							tempPath.unshift(caption);
+							foundGroupParent = true;
+						}
+						// 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
+						break;
+					}
+				}
+			}
+
+			// tempPath의 내용을 Home 다음으로 삽입
+			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
+			// tempPath: ['자료관리', '심의자료']
+			path.push(...tempPath);
+		}
+
+		// 마지막으로 현재 페이지의 구체적인 제목 추가
+		path.push(currentPageCaption);
+
+		this.#breadcrumbPath = path;
+		this.#renderer();
+	};
+
+	#renderer = () => {
 		const caption = this.getAttribute("caption") || "No Caption";
 
+		// 내부 HTML (Light DOM)은 이 컴포넌트의 자식으로 넘어오는 콘텐츠이므로,
+		// Breadcrumb에서는 사용하지 않는다면 제거하는 것이 맞습니다.
+		// 여기서는 이전에 contents 변수에 저장했지만 사용하지 않았으므로, 제거 로직을 유지합니다.
 		this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
+		// Shadow DOM 초기화 (새로운 콘텐츠를 위해)
+		this.shadowRoot.innerHTML = "";
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
-				${ninegrid.getCustomPath(this,"nxTitle.css")}
-			</style>
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
+             ${ninegrid.getCustomPath(this,"nxTitle.css")}
+             
+             /* Breadcrumb CSS */
+             .breadcrumb-container {
+                 padding: 10px 15px;
+                 background-color: #f5f5f5;
+                 border-bottom: 1px solid #eee;
+                 font-size: 13px;
+                 color: #777;
+                 display: flex; /* 가로 정렬 */
+                 align-items: center;
+                 justify-content: flex-end; /* 오른쪽 정렬 */
+                 margin-bottom: 15px; /* 제목과의 간격 */
+             }
+             .breadcrumb-item {
+                 white-space: nowrap; /* 줄바꿈 방지 */
+             }
+             .breadcrumb-separator {
+                 margin: 0 5px;
+                 color: #bbb;
+             }
+             .breadcrumb-current {
+                 font-weight: bold;
+                 color: #333;
+             }
+
+             /* Title CSS (아이콘 및 텍스트 스타일) */
+             .title-wrapper {
+                 display: flex;
+                 align-items: center;
+                 padding: 10px 15px;
+                 border-bottom: 2px solid #eee;
+                 margin-bottom: 15px;
+             }
+             .title-icon {
+                 margin-right: 10px;
+                 font-size: 20px;
+                 color: #333;
+                 /* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
+                 /* font-family: 'Font Awesome 5 Free'; */
+                 /* font-weight: 900; */
+                 /* content: '\f054'; */
+             }
+             .title-text {
+                 font-size: 18px;
+                 font-weight: bold;
+                 color: #333;
+             }
+          </style>
             
             <div class="wrapper">
-				<i class="title-icon"></i> <span class="title-text">${caption}</span>
-			</div>
+                <div class="breadcrumb-container">
+                    ${this.#breadcrumbPath.map((item, index) => `
+                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
+                          ${item}
+                       </span>
+                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
+                    `).join('')}
+                </div>
+                <div class="title-wrapper">
+                    <i class="title-icon"></i> 
+                    <span class="title-text">${caption}</span>
+                </div>
+            </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));

package/dist/bundle.esm.js

@@ -121642,31 +121642,160 @@ class nxForm extends HTMLElement {
 customElements.define("nx-form", nxForm);
 
 class nxTitle extends HTMLElement {
+
+	#breadcrumbPath = [];		// Breadcrumb 경로를 저장할 내부 상태 초기화
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
-		this.#randerer();
+		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
+		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 	}
 
-	#randerer = () => {
+	// Breadcrumb 경로를 구성하는 비공개 메서드
+	#generateBreadcrumb = () => {
+		const path = ["Home"]; // 기본 경로 시작은 Home
+
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
+		const currentPageCaption = this.getAttribute("caption") || "Current Page";
+
+		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
+		const activeMenuItem = document.querySelector('nx-side-menu-item.active');
+
+		if (activeMenuItem) {
+			const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
+
+			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
+			const currentActiveCaption = activeMenuItem.getAttribute('caption');
+			if (currentActiveCaption) {
+				tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
+			}
+
+			// 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
+			//    그 이전에 있는 'group' 메뉴(예: '자료관리')를 찾습니다.
+			let currentElement = activeMenuItem;
+			let foundGroupParent = false;    // '자료관리' 그룹을 찾았는지 여부
+
+			// activeMenuItem부터 이전 형제들을 역으로 탐색
+			while (currentElement) {
+				// 현재 activeMenuItem이 'group' 속성이 없는 일반 메뉴일 경우,
+				// 바로 그 자체가 두 번째 레벨 메뉴(예: '심의자료')의 역할을 합니다.
+				// 이미 activeMenuItem의 캡션은 추가되었으므로 여기서는 건너뜁니다.
+
+				// 이전 형제 탐색
+				currentElement = currentElement.previousElementSibling;
+
+				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
+					const caption = currentElement.getAttribute('caption');
+
+					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
+					if (currentElement.hasAttribute('group')) {
+						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
+							tempPath.unshift(caption);
+							foundGroupParent = true;
+						}
+						// 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
+						break;
+					}
+				}
+			}
+
+			// tempPath의 내용을 Home 다음으로 삽입
+			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
+			// tempPath: ['자료관리', '심의자료']
+			path.push(...tempPath);
+		}
+
+		// 마지막으로 현재 페이지의 구체적인 제목 추가
+		path.push(currentPageCaption);
+
+		this.#breadcrumbPath = path;
+		this.#renderer();
+	};
+
+	#renderer = () => {
 		const caption = this.getAttribute("caption") || "No Caption";
 
+		// 내부 HTML (Light DOM)은 이 컴포넌트의 자식으로 넘어오는 콘텐츠이므로,
+		// Breadcrumb에서는 사용하지 않는다면 제거하는 것이 맞습니다.
+		// 여기서는 이전에 contents 변수에 저장했지만 사용하지 않았으므로, 제거 로직을 유지합니다.
 		this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
+		// Shadow DOM 초기화 (새로운 콘텐츠를 위해)
+		this.shadowRoot.innerHTML = "";
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
-				${ninegrid.getCustomPath(this,"nxTitle.css")}
-			</style>
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
+             ${ninegrid.getCustomPath(this,"nxTitle.css")}
+             
+             /* Breadcrumb CSS */
+             .breadcrumb-container {
+                 padding: 10px 15px;
+                 background-color: #f5f5f5;
+                 border-bottom: 1px solid #eee;
+                 font-size: 13px;
+                 color: #777;
+                 display: flex; /* 가로 정렬 */
+                 align-items: center;
+                 justify-content: flex-end; /* 오른쪽 정렬 */
+                 margin-bottom: 15px; /* 제목과의 간격 */
+             }
+             .breadcrumb-item {
+                 white-space: nowrap; /* 줄바꿈 방지 */
+             }
+             .breadcrumb-separator {
+                 margin: 0 5px;
+                 color: #bbb;
+             }
+             .breadcrumb-current {
+                 font-weight: bold;
+                 color: #333;
+             }
+
+             /* Title CSS (아이콘 및 텍스트 스타일) */
+             .title-wrapper {
+                 display: flex;
+                 align-items: center;
+                 padding: 10px 15px;
+                 border-bottom: 2px solid #eee;
+                 margin-bottom: 15px;
+             }
+             .title-icon {
+                 margin-right: 10px;
+                 font-size: 20px;
+                 color: #333;
+                 /* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
+                 /* font-family: 'Font Awesome 5 Free'; */
+                 /* font-weight: 900; */
+                 /* content: '\f054'; */
+             }
+             .title-text {
+                 font-size: 18px;
+                 font-weight: bold;
+                 color: #333;
+             }
+          </style>
             
             <div class="wrapper">
-				<i class="title-icon"></i> <span class="title-text">${caption}</span>
-			</div>
+                <div class="breadcrumb-container">
+                    ${this.#breadcrumbPath.map((item, index) => `
+                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
+                          ${item}
+                       </span>
+                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
+                    `).join('')}
+                </div>
+                <div class="title-wrapper">
+                    <i class="title-icon"></i> 
+                    <span class="title-text">${caption}</span>
+                </div>
+            </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));

package/dist/nx/nxTitle.js

@@ -1,35 +1,180 @@
 import ninegrid from "../index.js";
 
 class nxTitle extends HTMLElement {
+
+	#breadcrumbPath = [];		// Breadcrumb 경로를 저장할 내부 상태 초기화
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
-		this.#randerer();
+		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
+		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 	}
 
-	#randerer = () => {
+	// Breadcrumb 경로를 구성하는 비공개 메서드
+	#generateBreadcrumb = () => {
+		const path = ["Home"]; // 기본 경로 시작은 Home
+
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
+		const currentPageCaption = this.getAttribute("caption") || "Current Page";
+
+		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
+		const activeMenuItem = document.querySelector('nx-side-menu-item.active');
+
+		if (activeMenuItem) {
+			const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
+
+			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
+			const currentActiveCaption = activeMenuItem.getAttribute('caption');
+			if (currentActiveCaption) {
+				tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
+			}
+
+			// 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
+			//    그 이전에 있는 'group' 메뉴(예: '자료관리')를 찾습니다.
+			let currentElement = activeMenuItem;
+			let foundNonGroupParent = false; // '자료관리'와 '심의자료' 사이의 메뉴를 찾았는지 여부
+			let foundGroupParent = false;    // '자료관리' 그룹을 찾았는지 여부
+
+			// activeMenuItem부터 이전 형제들을 역으로 탐색
+			while (currentElement) {
+				// 현재 activeMenuItem이 'group' 속성이 없는 일반 메뉴일 경우,
+				// 바로 그 자체가 두 번째 레벨 메뉴(예: '심의자료')의 역할을 합니다.
+				// 이미 activeMenuItem의 캡션은 추가되었으므로 여기서는 건너뜁니다.
+
+				// 이전 형제 탐색
+				currentElement = currentElement.previousElementSibling;
+
+				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
+					const caption = currentElement.getAttribute('caption');
+
+					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
+					if (currentElement.hasAttribute('group')) {
+						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
+							tempPath.unshift(caption);
+							foundGroupParent = true;
+						}
+						// 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
+						break;
+					}
+						// 'group' 속성이 없고, 아직 '심의자료' 같은 중간 부모를 찾지 않았다면 추가
+						// (activeMenuItem이 이미 최하위 메뉴 캡션을 가지고 있으므로,
+					// 이 로직은 activeMenuItem이 아닌 그 위의 일반 메뉴를 위한 것임)
+					else if (caption && !foundNonGroupParent) {
+						// 이 부분은 currentActiveCaption이 '심의자료 상세'이고,
+						// activeMenuItem 자체가 '심의자료'일 때 문제가 될 수 있으니 주의
+						// 만약 activeMenuItem이 항상 최하위 캡션을 가진다면,
+						// 이 nonGroupParent 로직은 activeMenuItem의 직접적인 부모 (그룹이 아닌)를 찾는 데 쓰여야 함.
+						// 현재 시나리오에서는 'activeMenuItem'이 '심의자료' 역할을 할 가능성이 높음.
+						// '심의자료 상세'는 currentPageCaption이므로.
+
+						// activeMenuItem이 '심의자료' 역할을 한다고 가정하고,
+						// 이 루프에서는 그 '심의자료' 위의 '자료관리' 그룹만 찾도록 수정합니다.
+						// 즉, previousElementSibling은 현재 active 메뉴의 "옆에 있는" 그룹을 찾아야 합니다.
+					}
+				}
+			}
+
+			// tempPath의 내용을 Home 다음으로 삽입
+			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
+			// tempPath: ['자료관리', '심의자료']
+			path.push(...tempPath);
+		}
+
+		// 마지막으로 현재 페이지의 구체적인 제목 추가
+		path.push(currentPageCaption);
+
+		this.#breadcrumbPath = path;
+		this.#renderer();
+	};
+
+	#renderer = () => {
 		const caption = this.getAttribute("caption") || "No Caption";
 
+		// 내부 HTML (Light DOM)은 이 컴포넌트의 자식으로 넘어오는 콘텐츠이므로,
+		// Breadcrumb에서는 사용하지 않는다면 제거하는 것이 맞습니다.
+		// 여기서는 이전에 contents 변수에 저장했지만 사용하지 않았으므로, 제거 로직을 유지합니다.
 		const contents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
+		// Shadow DOM 초기화 (새로운 콘텐츠를 위해)
+		this.shadowRoot.innerHTML = "";
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
-				${ninegrid.getCustomPath(this,"nxTitle.css")}
-			</style>
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
+             ${ninegrid.getCustomPath(this,"nxTitle.css")}
+             
+             /* Breadcrumb CSS */
+             .breadcrumb-container {
+                 padding: 10px 15px;
+                 background-color: #f5f5f5;
+                 border-bottom: 1px solid #eee;
+                 font-size: 13px;
+                 color: #777;
+                 display: flex; /* 가로 정렬 */
+                 align-items: center;
+                 justify-content: flex-end; /* 오른쪽 정렬 */
+                 margin-bottom: 15px; /* 제목과의 간격 */
+             }
+             .breadcrumb-item {
+                 white-space: nowrap; /* 줄바꿈 방지 */
+             }
+             .breadcrumb-separator {
+                 margin: 0 5px;
+                 color: #bbb;
+             }
+             .breadcrumb-current {
+                 font-weight: bold;
+                 color: #333;
+             }
+
+             /* Title CSS (아이콘 및 텍스트 스타일) */
+             .title-wrapper {
+                 display: flex;
+                 align-items: center;
+                 padding: 10px 15px;
+                 border-bottom: 2px solid #eee;
+                 margin-bottom: 15px;
+             }
+             .title-icon {
+                 margin-right: 10px;
+                 font-size: 20px;
+                 color: #333;
+                 /* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
+                 /* font-family: 'Font Awesome 5 Free'; */
+                 /* font-weight: 900; */
+                 /* content: '\f054'; */
+             }
+             .title-text {
+                 font-size: 18px;
+                 font-weight: bold;
+                 color: #333;
+             }
+          </style>
             
             <div class="wrapper">
-				<i class="title-icon"></i> <span class="title-text">${caption}</span>
-			</div>
+                <div class="breadcrumb-container">
+                    ${this.#breadcrumbPath.map((item, index) => `
+                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
+                          ${item}
+                       </span>
+                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
+                    `).join('')}
+                </div>
+                <div class="title-wrapper">
+                    <i class="title-icon"></i> 
+                    <span class="title-text">${caption}</span>
+                </div>
+            </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
-customElements.define("nx-title", nxTitle);
+customElements.define("nx-title", nxTitle);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.912.0",
+  "version": "6.913.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxTitle.js

@@ -1,35 +1,180 @@
 import ninegrid from "../index.js";
 
 class nxTitle extends HTMLElement {
+
+	#breadcrumbPath = [];		// Breadcrumb 경로를 저장할 내부 상태 초기화
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
-		this.#randerer();
+		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
+		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 	}
 
-	#randerer = () => {
+	// Breadcrumb 경로를 구성하는 비공개 메서드
+	#generateBreadcrumb = () => {
+		const path = ["Home"]; // 기본 경로 시작은 Home
+
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
+		const currentPageCaption = this.getAttribute("caption") || "Current Page";
+
+		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
+		const activeMenuItem = document.querySelector('nx-side-menu-item.active');
+
+		if (activeMenuItem) {
+			const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
+
+			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
+			const currentActiveCaption = activeMenuItem.getAttribute('caption');
+			if (currentActiveCaption) {
+				tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
+			}
+
+			// 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
+			//    그 이전에 있는 'group' 메뉴(예: '자료관리')를 찾습니다.
+			let currentElement = activeMenuItem;
+			let foundNonGroupParent = false; // '자료관리'와 '심의자료' 사이의 메뉴를 찾았는지 여부
+			let foundGroupParent = false;    // '자료관리' 그룹을 찾았는지 여부
+
+			// activeMenuItem부터 이전 형제들을 역으로 탐색
+			while (currentElement) {
+				// 현재 activeMenuItem이 'group' 속성이 없는 일반 메뉴일 경우,
+				// 바로 그 자체가 두 번째 레벨 메뉴(예: '심의자료')의 역할을 합니다.
+				// 이미 activeMenuItem의 캡션은 추가되었으므로 여기서는 건너뜁니다.
+
+				// 이전 형제 탐색
+				currentElement = currentElement.previousElementSibling;
+
+				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
+					const caption = currentElement.getAttribute('caption');
+
+					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
+					if (currentElement.hasAttribute('group')) {
+						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
+							tempPath.unshift(caption);
+							foundGroupParent = true;
+						}
+						// 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
+						break;
+					}
+						// 'group' 속성이 없고, 아직 '심의자료' 같은 중간 부모를 찾지 않았다면 추가
+						// (activeMenuItem이 이미 최하위 메뉴 캡션을 가지고 있으므로,
+					// 이 로직은 activeMenuItem이 아닌 그 위의 일반 메뉴를 위한 것임)
+					else if (caption && !foundNonGroupParent) {
+						// 이 부분은 currentActiveCaption이 '심의자료 상세'이고,
+						// activeMenuItem 자체가 '심의자료'일 때 문제가 될 수 있으니 주의
+						// 만약 activeMenuItem이 항상 최하위 캡션을 가진다면,
+						// 이 nonGroupParent 로직은 activeMenuItem의 직접적인 부모 (그룹이 아닌)를 찾는 데 쓰여야 함.
+						// 현재 시나리오에서는 'activeMenuItem'이 '심의자료' 역할을 할 가능성이 높음.
+						// '심의자료 상세'는 currentPageCaption이므로.
+
+						// activeMenuItem이 '심의자료' 역할을 한다고 가정하고,
+						// 이 루프에서는 그 '심의자료' 위의 '자료관리' 그룹만 찾도록 수정합니다.
+						// 즉, previousElementSibling은 현재 active 메뉴의 "옆에 있는" 그룹을 찾아야 합니다.
+					}
+				}
+			}
+
+			// tempPath의 내용을 Home 다음으로 삽입
+			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
+			// tempPath: ['자료관리', '심의자료']
+			path.push(...tempPath);
+		}
+
+		// 마지막으로 현재 페이지의 구체적인 제목 추가
+		path.push(currentPageCaption);
+
+		this.#breadcrumbPath = path;
+		this.#renderer();
+	};
+
+	#renderer = () => {
 		const caption = this.getAttribute("caption") || "No Caption";
 
+		// 내부 HTML (Light DOM)은 이 컴포넌트의 자식으로 넘어오는 콘텐츠이므로,
+		// Breadcrumb에서는 사용하지 않는다면 제거하는 것이 맞습니다.
+		// 여기서는 이전에 contents 변수에 저장했지만 사용하지 않았으므로, 제거 로직을 유지합니다.
 		const contents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
+		// Shadow DOM 초기화 (새로운 콘텐츠를 위해)
+		this.shadowRoot.innerHTML = "";
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
-				${ninegrid.getCustomPath(this,"nxTitle.css")}
-			</style>
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
+             ${ninegrid.getCustomPath(this,"nxTitle.css")}
+             
+             /* Breadcrumb CSS */
+             .breadcrumb-container {
+                 padding: 10px 15px;
+                 background-color: #f5f5f5;
+                 border-bottom: 1px solid #eee;
+                 font-size: 13px;
+                 color: #777;
+                 display: flex; /* 가로 정렬 */
+                 align-items: center;
+                 justify-content: flex-end; /* 오른쪽 정렬 */
+                 margin-bottom: 15px; /* 제목과의 간격 */
+             }
+             .breadcrumb-item {
+                 white-space: nowrap; /* 줄바꿈 방지 */
+             }
+             .breadcrumb-separator {
+                 margin: 0 5px;
+                 color: #bbb;
+             }
+             .breadcrumb-current {
+                 font-weight: bold;
+                 color: #333;
+             }
+
+             /* Title CSS (아이콘 및 텍스트 스타일) */
+             .title-wrapper {
+                 display: flex;
+                 align-items: center;
+                 padding: 10px 15px;
+                 border-bottom: 2px solid #eee;
+                 margin-bottom: 15px;
+             }
+             .title-icon {
+                 margin-right: 10px;
+                 font-size: 20px;
+                 color: #333;
+                 /* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
+                 /* font-family: 'Font Awesome 5 Free'; */
+                 /* font-weight: 900; */
+                 /* content: '\f054'; */
+             }
+             .title-text {
+                 font-size: 18px;
+                 font-weight: bold;
+                 color: #333;
+             }
+          </style>
             
             <div class="wrapper">
-				<i class="title-icon"></i> <span class="title-text">${caption}</span>
-			</div>
+                <div class="breadcrumb-container">
+                    ${this.#breadcrumbPath.map((item, index) => `
+                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
+                          ${item}
+                       </span>
+                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
+                    `).join('')}
+                </div>
+                <div class="title-wrapper">
+                    <i class="title-icon"></i> 
+                    <span class="title-text">${caption}</span>
+                </div>
+            </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
-customElements.define("nx-title", nxTitle);
+customElements.define("nx-title", nxTitle);