diff --git a/articles/components/breadcrumb/breadcrumb.png b/articles/components/breadcrumb/breadcrumb.png new file mode 100644 index 0000000000..4e1825d30f --- /dev/null +++ b/articles/components/breadcrumb/breadcrumb.png @@ -0,0 +1 @@ +PNG_PLACEHOLDER \ No newline at end of file diff --git a/articles/components/breadcrumb/index.adoc b/articles/components/breadcrumb/index.adoc new file mode 100644 index 0000000000..b94b4e8453 --- /dev/null +++ b/articles/components/breadcrumb/index.adoc @@ -0,0 +1,292 @@ +--- +tab-title: Usage +layout: tabbed-page +title: Breadcrumb +page-title: Breadcrumb Component | Vaadin components +description: Breadcrumb is a navigation component that shows a hierarchical path through the application's structure, allowing users to navigate back to previous levels. +meta-description: Use Vaadin's Breadcrumb component to show a hierarchical path through the application's structure and provide navigation to parent levels. +page-links: + - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/breadcrumb}/#/elements/vaadin-breadcrumb[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/breadcrumb/Breadcrumb.html[Java]' + - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/breadcrumb}/packages/breadcrumb[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-breadcrumb-flow-parent[Java]' +--- + += Breadcrumb +:toclevels: 2 +:experimental: + +// tag::description[] +Breadcrumb is a navigation component that shows a hierarchical path through the application's structure, allowing users to navigate back to previous levels. +// end::description[] + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/breadcrumb/breadcrumb-basic.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbBasic.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/breadcrumb/react/breadcrumb-basic.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + +Use Breadcrumb when you want to show the user's current location within a hierarchy and provide navigation to parent levels. The component is particularly useful in applications with deep navigation structures. + + +== Adding Items + +Breadcrumb items can be added individually or in bulk. Each item represents a level in the navigation hierarchy. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/breadcrumb/breadcrumb-items.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbItems.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/breadcrumb/react/breadcrumb-items.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + + +== Navigation + +Breadcrumb items can be configured with links to enable navigation. The last item typically represents the current page and should not be clickable. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/breadcrumb/breadcrumb-navigation.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbNavigation.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/breadcrumb/react/breadcrumb-navigation.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + +ifdef::flow[] +=== Router Integration + +In Flow applications, breadcrumb items can be integrated with Vaadin Router for type-safe navigation to specific views. + +[.example] +-- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbRouter.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +-- +endif::[] + + +== Disabled Items + +Individual breadcrumb items can be disabled to indicate that navigation to that level is not currently available. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/breadcrumb/breadcrumb-disabled.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbDisabled.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/breadcrumb/react/breadcrumb-disabled.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + + +== Size Variants + +Breadcrumb supports different size variants to fit various layout requirements. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/breadcrumb/breadcrumb-sizes.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbSizes.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/breadcrumb/react/breadcrumb-sizes.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + +[cols="1,3",grid=rows] +|=== +|Variant |Usage Recommendation + +|Small +|Compact option for dense layouts or when space is limited. + +|Normal +|Default size. Suitable for most use cases. + +|Large +|For improved visibility and touch accessibility on larger displays. +|=== + + +== Custom Content + +Breadcrumb items can contain custom components in addition to or instead of plain text. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/breadcrumb/breadcrumb-custom.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbCustom.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/breadcrumb/react/breadcrumb-custom.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + + +== Best Practices + +=== Hierarchy Representation + +Breadcrumbs should reflect the actual information architecture of your application, not the user's session history. Each level should represent a logical parent-child relationship. + + +=== Current Page Indication + +The last breadcrumb item should represent the current page and should not be clickable. This helps users understand their current location. + + +=== Length Consideration + +Avoid overly long breadcrumb trails. Consider abbreviating middle levels or using ellipsis for very deep hierarchies to maintain usability. + + +=== Mobile Considerations + +On smaller screens, consider showing only the immediate parent and current page, or implement a collapsible breadcrumb pattern. + + +== Keyboard Usage + +Users can navigate breadcrumb items using the following keyboard shortcuts: + +- kbd:[Tab] / kbd:[Shift+Tab]: Move focus between breadcrumb items +- kbd:[Enter] / kbd:[Space]: Activate the focused item (if it has a link) + + +== Accessibility + +Breadcrumb automatically includes proper ARIA attributes for screen readers: + +- The component has `role="navigation"` and `aria-label="Breadcrumb"` +- The current page item is marked with `aria-current="page"` +- Disabled items are properly communicated to assistive technologies + + +== Related Components + +[cols="1,2"] +|=== +|Component |Usage Recommendation + +|<<../menu-bar#,Menu Bar>> +|For horizontal navigation menus with dropdown options. + +|<<../side-nav#,Side Navigation>> +|For vertical navigation in application sidebars. + +|<<../tabs#,Tabs>> +|For switching between different views or sections within the same page. +|=== + + +[discussion-id]`BREADCRUMB-COMPONENT-DISCUSSION` \ No newline at end of file diff --git a/articles/components/breadcrumb/styling.adoc b/articles/components/breadcrumb/styling.adoc new file mode 100644 index 0000000000..e55fc31b1c --- /dev/null +++ b/articles/components/breadcrumb/styling.adoc @@ -0,0 +1,143 @@ +--- +tab-title: Styling +layout: tabbed-page +title: Breadcrumb +page-title: Breadcrumb component styling | Vaadin components +--- + += Styling + +include::../../_styling-section-intros.adoc[tag=selectors] + + +== Parts + +[.table-wrap] +[cols="1,1,2"] +|=== +|Part name |Element |Description + +|`list` +|`
    ` +|The ordered list element containing all breadcrumb items +|=== + + +== Breadcrumb Item Parts + +[.table-wrap] +[cols="1,1,2"] +|=== +|Part name |Element |Description + +|`link` +|`` +|The link element (when href is provided) + +|`separator` +|`` +|The separator element between items +|=== + + +== States + +[cols="1,2"] +|=== +|State attribute |Description + +|`disabled` +|Set when the breadcrumb item is disabled + +|`last` +|Set when this is the last item in the breadcrumb + +|`current` +|Set when the item's href matches the current page +|=== + + +include::../../_styling-section-theming-props.adoc[tag=style-props] + +== Custom Properties + +The following custom properties can be used to customize the appearance: + +[cols="1,1,2"] +|=== +|Custom property |Default value |Description + +|`--vaadin-breadcrumb-separator` +|"/" +|The separator character between breadcrumb items + +|`--vaadin-breadcrumb-link-color` +|`var(--lumo-primary-text-color)` +|Color of clickable breadcrumb links + +|`--vaadin-breadcrumb-current-color` +|`var(--lumo-body-text-color)` +|Color of the current (last) breadcrumb item +|=== + + +== Examples + +=== Custom Separator + +[.example] +-- +[source,css] +---- +vaadin-breadcrumb { + --vaadin-breadcrumb-separator: ">"; +} +---- +-- + +=== Custom Colors + +[.example] +-- +[source,css] +---- +vaadin-breadcrumb { + --vaadin-breadcrumb-link-color: #0066cc; + --vaadin-breadcrumb-current-color: #333; +} +---- +-- + +=== Styling Individual Items + +[.example] +-- +[source,css] +---- +vaadin-breadcrumb-item { + font-weight: 500; +} + +vaadin-breadcrumb-item[current] { + font-weight: 600; + color: var(--lumo-contrast-color); +} + +vaadin-breadcrumb-item[disabled] { + opacity: 0.5; +} +---- +-- + +=== Custom Separator Styling + +[.example] +-- +[source,css] +---- +vaadin-breadcrumb-item::part(separator) { + color: var(--lumo-disabled-text-color); + margin: 0 0.5em; +} +---- +-- \ No newline at end of file diff --git a/frontend/demo/component/breadcrumb/breadcrumb-basic.ts b/frontend/demo/component/breadcrumb/breadcrumb-basic.ts new file mode 100644 index 0000000000..2ebd879270 --- /dev/null +++ b/frontend/demo/component/breadcrumb/breadcrumb-basic.ts @@ -0,0 +1,27 @@ +import '@vaadin/breadcrumb'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { applyTheme } from 'Frontend/generated/theme'; + +@customElement('breadcrumb-basic') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + // Apply custom theme (only supported if your app uses one) + applyTheme(root); + return root; + } + + protected override render() { + return html` + + + Home + Products + Electronics + Laptops + + + `; + } +} diff --git a/frontend/demo/component/breadcrumb/breadcrumb-custom.ts b/frontend/demo/component/breadcrumb/breadcrumb-custom.ts new file mode 100644 index 0000000000..be2c84222f --- /dev/null +++ b/frontend/demo/component/breadcrumb/breadcrumb-custom.ts @@ -0,0 +1,37 @@ +import '@vaadin/breadcrumb'; +import '@vaadin/icon'; +import '@vaadin/icons'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { applyTheme } from 'Frontend/generated/theme'; + +@customElement('breadcrumb-custom') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + // Apply custom theme (only supported if your app uses one) + applyTheme(root); + return root; + } + + protected override render() { + return html` + + + + + Home + + + + Documentation + + + + Components + + + + `; + } +} diff --git a/frontend/demo/component/breadcrumb/breadcrumb-disabled.ts b/frontend/demo/component/breadcrumb/breadcrumb-disabled.ts new file mode 100644 index 0000000000..79e282ecce --- /dev/null +++ b/frontend/demo/component/breadcrumb/breadcrumb-disabled.ts @@ -0,0 +1,29 @@ +import '@vaadin/breadcrumb'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { applyTheme } from 'Frontend/generated/theme'; + +@customElement('breadcrumb-disabled') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + // Apply custom theme (only supported if your app uses one) + applyTheme(root); + return root; + } + + protected override render() { + return html` + + + Home + Products + + Electronics (Unavailable) + + Laptop + + + `; + } +} diff --git a/frontend/demo/component/breadcrumb/breadcrumb-items.ts b/frontend/demo/component/breadcrumb/breadcrumb-items.ts new file mode 100644 index 0000000000..eaa694044a --- /dev/null +++ b/frontend/demo/component/breadcrumb/breadcrumb-items.ts @@ -0,0 +1,28 @@ +import '@vaadin/breadcrumb'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { applyTheme } from 'Frontend/generated/theme'; + +@customElement('breadcrumb-items') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + // Apply custom theme (only supported if your app uses one) + applyTheme(root); + return root; + } + + protected override render() { + return html` + + + Dashboard + Reports + Monthly + 2024 + January + + + `; + } +} diff --git a/frontend/demo/component/breadcrumb/breadcrumb-navigation.ts b/frontend/demo/component/breadcrumb/breadcrumb-navigation.ts new file mode 100644 index 0000000000..16b72ea4dc --- /dev/null +++ b/frontend/demo/component/breadcrumb/breadcrumb-navigation.ts @@ -0,0 +1,27 @@ +import '@vaadin/breadcrumb'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { applyTheme } from 'Frontend/generated/theme'; + +@customElement('breadcrumb-navigation') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + // Apply custom theme (only supported if your app uses one) + applyTheme(root); + return root; + } + + protected override render() { + return html` + + + Home + Products + Electronics + Laptop Pro X1 + + + `; + } +} diff --git a/frontend/demo/component/breadcrumb/breadcrumb-sizes.ts b/frontend/demo/component/breadcrumb/breadcrumb-sizes.ts new file mode 100644 index 0000000000..2ab51c6635 --- /dev/null +++ b/frontend/demo/component/breadcrumb/breadcrumb-sizes.ts @@ -0,0 +1,40 @@ +import '@vaadin/breadcrumb'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { applyTheme } from 'Frontend/generated/theme'; + +@customElement('breadcrumb-sizes') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + // Apply custom theme (only supported if your app uses one) + applyTheme(root); + return root; + } + + protected override render() { + return html` + +
    + + Home + Documentation + Components + + + + Home + Documentation + Components + + + + Home + Documentation + Components + +
    + + `; + } +} diff --git a/frontend/demo/component/breadcrumb/react/breadcrumb-basic.tsx b/frontend/demo/component/breadcrumb/react/breadcrumb-basic.tsx new file mode 100644 index 0000000000..cffe54713f --- /dev/null +++ b/frontend/demo/component/breadcrumb/react/breadcrumb-basic.tsx @@ -0,0 +1,15 @@ +import { Breadcrumb } from '@vaadin/react-components/Breadcrumb.js'; +import { BreadcrumbItem } from '@vaadin/react-components/BreadcrumbItem.js'; + +export default function Example() { + return ( + // tag::snippet[] + + Home + Products + Electronics + Laptops + + // end::snippet[] + ); +} \ No newline at end of file diff --git a/frontend/demo/component/breadcrumb/react/breadcrumb-custom.tsx b/frontend/demo/component/breadcrumb/react/breadcrumb-custom.tsx new file mode 100644 index 0000000000..6facacf189 --- /dev/null +++ b/frontend/demo/component/breadcrumb/react/breadcrumb-custom.tsx @@ -0,0 +1,25 @@ +import { Breadcrumb } from '@vaadin/react-components/Breadcrumb.js'; +import { BreadcrumbItem } from '@vaadin/react-components/BreadcrumbItem.js'; +import { Icon } from '@vaadin/react-components/Icon.js'; +import '@vaadin/icons'; + +export default function Example() { + return ( + // tag::snippet[] + + + + Home + + + + Documentation + + + + Components + + + // end::snippet[] + ); +} \ No newline at end of file diff --git a/frontend/demo/component/breadcrumb/react/breadcrumb-disabled.tsx b/frontend/demo/component/breadcrumb/react/breadcrumb-disabled.tsx new file mode 100644 index 0000000000..356a76a28a --- /dev/null +++ b/frontend/demo/component/breadcrumb/react/breadcrumb-disabled.tsx @@ -0,0 +1,17 @@ +import { Breadcrumb } from '@vaadin/react-components/Breadcrumb.js'; +import { BreadcrumbItem } from '@vaadin/react-components/BreadcrumbItem.js'; + +export default function Example() { + return ( + // tag::snippet[] + + Home + Products + + Electronics (Unavailable) + + Laptop + + // end::snippet[] + ); +} \ No newline at end of file diff --git a/frontend/demo/component/breadcrumb/react/breadcrumb-items.tsx b/frontend/demo/component/breadcrumb/react/breadcrumb-items.tsx new file mode 100644 index 0000000000..def8593159 --- /dev/null +++ b/frontend/demo/component/breadcrumb/react/breadcrumb-items.tsx @@ -0,0 +1,16 @@ +import { Breadcrumb } from '@vaadin/react-components/Breadcrumb.js'; +import { BreadcrumbItem } from '@vaadin/react-components/BreadcrumbItem.js'; + +export default function Example() { + return ( + // tag::snippet[] + + Dashboard + Reports + Monthly + 2024 + January + + // end::snippet[] + ); +} \ No newline at end of file diff --git a/frontend/demo/component/breadcrumb/react/breadcrumb-navigation.tsx b/frontend/demo/component/breadcrumb/react/breadcrumb-navigation.tsx new file mode 100644 index 0000000000..8f83738ada --- /dev/null +++ b/frontend/demo/component/breadcrumb/react/breadcrumb-navigation.tsx @@ -0,0 +1,15 @@ +import { Breadcrumb } from '@vaadin/react-components/Breadcrumb.js'; +import { BreadcrumbItem } from '@vaadin/react-components/BreadcrumbItem.js'; + +export default function Example() { + return ( + // tag::snippet[] + + Home + Products + Electronics + Laptop Pro X1 + + // end::snippet[] + ); +} \ No newline at end of file diff --git a/frontend/demo/component/breadcrumb/react/breadcrumb-sizes.tsx b/frontend/demo/component/breadcrumb/react/breadcrumb-sizes.tsx new file mode 100644 index 0000000000..6c86bcfec2 --- /dev/null +++ b/frontend/demo/component/breadcrumb/react/breadcrumb-sizes.tsx @@ -0,0 +1,28 @@ +import { Breadcrumb } from '@vaadin/react-components/Breadcrumb.js'; +import { BreadcrumbItem } from '@vaadin/react-components/BreadcrumbItem.js'; + +export default function Example() { + return ( + // tag::snippet[] +
    + + Home + Documentation + Components + + + + Home + Documentation + Components + + + + Home + Documentation + Components + +
    + // end::snippet[] + ); +} \ No newline at end of file diff --git a/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbBasic.java b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbBasic.java new file mode 100644 index 0000000000..0735d49c79 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbBasic.java @@ -0,0 +1,29 @@ +package com.vaadin.demo.component.breadcrumb; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.flow.component.breadcrumb.Breadcrumb; +import com.vaadin.flow.component.breadcrumb.BreadcrumbItem; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.router.Route; + +@Route("breadcrumb-basic") +public class BreadcrumbBasic extends Div { + + public BreadcrumbBasic() { + // tag::snippet[] + Breadcrumb breadcrumb = new Breadcrumb(); + + breadcrumb.add( + new BreadcrumbItem("Home"), + new BreadcrumbItem("Products"), + new BreadcrumbItem("Electronics"), + new BreadcrumbItem("Laptops") + ); + // end::snippet[] + + add(breadcrumb); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} \ No newline at end of file diff --git a/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbCustom.java b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbCustom.java new file mode 100644 index 0000000000..4dc9a66756 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbCustom.java @@ -0,0 +1,36 @@ +package com.vaadin.demo.component.breadcrumb; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.flow.component.breadcrumb.Breadcrumb; +import com.vaadin.flow.component.breadcrumb.BreadcrumbItem; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.icon.Icon; +import com.vaadin.flow.component.icon.VaadinIcon; +import com.vaadin.flow.router.Route; + +@Route("breadcrumb-custom") +public class BreadcrumbCustom extends Div { + + public BreadcrumbCustom() { + // tag::snippet[] + Breadcrumb breadcrumb = new Breadcrumb(); + + BreadcrumbItem home = new BreadcrumbItem("/"); + home.add(new Icon(VaadinIcon.HOME), new Span("Home")); + + BreadcrumbItem docs = new BreadcrumbItem("/docs"); + docs.add(new Icon(VaadinIcon.BOOK), new Span("Documentation")); + + BreadcrumbItem components = new BreadcrumbItem(); + components.add(new Icon(VaadinIcon.CUBE), new Span("Components")); + + breadcrumb.add(home, docs, components); + // end::snippet[] + + add(breadcrumb); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} \ No newline at end of file diff --git a/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbDisabled.java b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbDisabled.java new file mode 100644 index 0000000000..11c05f5bcf --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbDisabled.java @@ -0,0 +1,33 @@ +package com.vaadin.demo.component.breadcrumb; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.flow.component.breadcrumb.Breadcrumb; +import com.vaadin.flow.component.breadcrumb.BreadcrumbItem; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.router.Route; + +@Route("breadcrumb-disabled") +public class BreadcrumbDisabled extends Div { + + public BreadcrumbDisabled() { + // tag::snippet[] + Breadcrumb breadcrumb = new Breadcrumb(); + + BreadcrumbItem home = new BreadcrumbItem("Home", "/"); + + BreadcrumbItem products = new BreadcrumbItem("Products", "/products"); + + BreadcrumbItem electronics = new BreadcrumbItem("Electronics (Unavailable)", "/products/electronics"); + electronics.setEnabled(false); + + BreadcrumbItem laptop = new BreadcrumbItem("Laptop"); + + breadcrumb.add(home, products, electronics, laptop); + // end::snippet[] + + add(breadcrumb); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} \ No newline at end of file diff --git a/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbItems.java b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbItems.java new file mode 100644 index 0000000000..7d73a591c0 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbItems.java @@ -0,0 +1,34 @@ +package com.vaadin.demo.component.breadcrumb; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.flow.component.breadcrumb.Breadcrumb; +import com.vaadin.flow.component.breadcrumb.BreadcrumbItem; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.router.Route; + +@Route("breadcrumb-items") +public class BreadcrumbItems extends Div { + + public BreadcrumbItems() { + // tag::snippet[] + Breadcrumb breadcrumb = new Breadcrumb(); + + BreadcrumbItem dashboard = new BreadcrumbItem("Dashboard"); + BreadcrumbItem reports = new BreadcrumbItem("Reports"); + BreadcrumbItem monthly = new BreadcrumbItem("Monthly"); + BreadcrumbItem year2024 = new BreadcrumbItem("2024"); + BreadcrumbItem january = new BreadcrumbItem("January"); + + breadcrumb.add(dashboard); + breadcrumb.add(reports); + breadcrumb.add(monthly); + breadcrumb.add(year2024); + breadcrumb.add(january); + // end::snippet[] + + add(breadcrumb); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} \ No newline at end of file diff --git a/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbNavigation.java b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbNavigation.java new file mode 100644 index 0000000000..adc72ec0f5 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbNavigation.java @@ -0,0 +1,29 @@ +package com.vaadin.demo.component.breadcrumb; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.flow.component.breadcrumb.Breadcrumb; +import com.vaadin.flow.component.breadcrumb.BreadcrumbItem; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.router.Route; + +@Route("breadcrumb-navigation") +public class BreadcrumbNavigation extends Div { + + public BreadcrumbNavigation() { + // tag::snippet[] + Breadcrumb breadcrumb = new Breadcrumb(); + + BreadcrumbItem home = new BreadcrumbItem("Home", "/"); + BreadcrumbItem products = new BreadcrumbItem("Products", "/products"); + BreadcrumbItem electronics = new BreadcrumbItem("Electronics", "/products/electronics"); + BreadcrumbItem laptop = new BreadcrumbItem("Laptop Pro X1"); + + breadcrumb.add(home, products, electronics, laptop); + // end::snippet[] + + add(breadcrumb); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} \ No newline at end of file diff --git a/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbRouter.java b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbRouter.java new file mode 100644 index 0000000000..910bad47a9 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbRouter.java @@ -0,0 +1,46 @@ +package com.vaadin.demo.component.breadcrumb; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.flow.component.breadcrumb.Breadcrumb; +import com.vaadin.flow.component.breadcrumb.BreadcrumbItem; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.router.Route; +import com.vaadin.flow.router.RouterLink; + +@Route("breadcrumb-router") +public class BreadcrumbRouter extends Div { + + public BreadcrumbRouter() { + // tag::snippet[] + Breadcrumb breadcrumb = new Breadcrumb(); + + BreadcrumbItem homeItem = new BreadcrumbItem(); + homeItem.add(new RouterLink("Home", HomeView.class)); + + BreadcrumbItem productsItem = new BreadcrumbItem(); + productsItem.add(new RouterLink("Products", ProductsView.class)); + + BreadcrumbItem electronicsItem = new BreadcrumbItem(); + electronicsItem.add(new RouterLink("Electronics", ElectronicsView.class)); + + BreadcrumbItem currentItem = new BreadcrumbItem("Laptop Pro X1"); + + breadcrumb.add(homeItem, productsItem, electronicsItem, currentItem); + // end::snippet[] + + add(breadcrumb); + } + + // Example view classes (would be actual views in a real application) + @Route("home") + static class HomeView extends Div {} + + @Route("products") + static class ProductsView extends Div {} + + @Route("electronics") + static class ElectronicsView extends Div {} + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} \ No newline at end of file diff --git a/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbSizes.java b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbSizes.java new file mode 100644 index 0000000000..3c200c7fd2 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/breadcrumb/BreadcrumbSizes.java @@ -0,0 +1,52 @@ +package com.vaadin.demo.component.breadcrumb; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.flow.component.breadcrumb.Breadcrumb; +import com.vaadin.flow.component.breadcrumb.BreadcrumbItem; +import com.vaadin.flow.component.breadcrumb.BreadcrumbVariant; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.Route; + +@Route("breadcrumb-sizes") +public class BreadcrumbSizes extends Div { + + public BreadcrumbSizes() { + // tag::snippet[] + VerticalLayout layout = new VerticalLayout(); + + // Small size + Breadcrumb smallBreadcrumb = new Breadcrumb(); + smallBreadcrumb.addThemeVariants(BreadcrumbVariant.SMALL); + smallBreadcrumb.add( + new BreadcrumbItem("Home", "/"), + new BreadcrumbItem("Documentation", "/docs"), + new BreadcrumbItem("Components") + ); + + // Normal size (default) + Breadcrumb normalBreadcrumb = new Breadcrumb(); + normalBreadcrumb.add( + new BreadcrumbItem("Home", "/"), + new BreadcrumbItem("Documentation", "/docs"), + new BreadcrumbItem("Components") + ); + + // Large size + Breadcrumb largeBreadcrumb = new Breadcrumb(); + largeBreadcrumb.addThemeVariants(BreadcrumbVariant.LARGE); + largeBreadcrumb.add( + new BreadcrumbItem("Home", "/"), + new BreadcrumbItem("Documentation", "/docs"), + new BreadcrumbItem("Components") + ); + + layout.add(smallBreadcrumb, normalBreadcrumb, largeBreadcrumb); + // end::snippet[] + + add(layout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} \ No newline at end of file