AppBreadcrumbs
AppPage header with breadcrumb trail, title, description, and optional status badge. Collapses to a Breadcrumb + dropdown menu on mobile for deep paths.
Edit invoice
DRAFTUpdate line items, taxes, and payment terms.
<%- include('modules/app/AppBreadcrumbs', {
title: 'Edit invoice',
description: 'Update line items, taxes, and payment terms.',
badgeContent: '<%- include("modules/ui/Badge", { variant: "warning", children: "DRAFT" }) %>',
items: [
{ label: 'Home', href: '/' },
{ label: 'Invoices', href: '/invoices' },
{ label: 'INV-1042', href: '/invoices/' + invoice.id },
{ label: 'Edit' }
]
}) %><%- include('modules/app/AppBreadcrumbs', {
items: [
{ label: 'Dashboard', href: '/' },
{ label: 'Settings', href: '/settings' },
{ label: 'Security' }
]
}) %><%
var _items = locals.items || [];
var _title = locals.title || '';
var _description = locals.description || '';
var _badge = locals.badgeContent || locals.badge || '';
var _className = locals.className || '';
var _hasHeader = !!(_title || _badge || _description);
var _id = locals.id || ('app-bc-' + Math.random().toString(36).substr(2, 6));
%>
<% if (_hasHeader) { %>
<% if (_title) { %><%= _title %>
<% } %>
<% if (_badge) { %><%- _badge %><% } %>
<% if (_description) { %>
<%= _description %>
<% } %>
<% } %>
<% if (_items.length > 0) { %>
<% if (_items.length > 2) { %>
<% _items.forEach(function(item, i) {
var iconCls = i === 0 ? 'fa-house' : (i === _items.length - 1 ? 'fa-file' : 'fa-folder');
%>
<% if (item.href) { %>
<%= item.label %>
<% } else { %>
<%= item.label %>
<% } %>
<% }); %>
<% } %>
<% } %>