Merge pull request #3654 from nextcloud/feat/bread

Breadcrumb: add exact prop and fix style

Author: skjnldsv

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -41,8 +41,11 @@ This component is meant to be used inside a Breadcrumbs component.
 		@dragleave="dragLeave">
 		<element :is="tag"
 			v-if="(title || icon) && !$slots.default"
+			:exact="exact"
 			:to="to"
-			:href="href">
+			:href="href"
+			v-bind="$attrs"
+			v-on="$listeners">
 			<!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
 			<slot name="icon">
 				<span v-if="icon" :class="icon" class="icon" />
@@ -89,42 +92,59 @@ export default {
 			type: String,
 			required: true,
 		},
+
 		/**
-		 * The router-link to prop [https://router.vuejs.org/api/#to](https://router.vuejs.org/api/#to)
-		 * If set, the breadcrumbs will be rendered by router-link.
+		 * Route Location the link should navigate to when clicked on.
+		 *
+		 * @see https://v3.router.vuejs.org/api/#to
 		 */
 		to: {
 			type: [String, Object],
 			default: undefined,
 		},
+
+		/**
+		 * Match the complete route attributes (query and hash included)
+		 *
+		 * @see https://v3.router.vuejs.org/api/#exact
+		 */
+		exact: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.
 		 */
 		href: {
 			type: String,
 			default: undefined,
 		},
+
 		/**
 		 * Set a css icon-class to show an icon instead of the title text.
 		 */
 		icon: {
 			type: String,
 			default: '',
 		},
+
 		/**
 		 * Disable dropping on this breadcrumb.
 		 */
 		disableDrop: {
 			type: Boolean,
 			default: false,
 		},
+
 		/**
 		 * Force the actions to display in a three dot menu
 		 */
 		forceMenu: {
 			type: Boolean,
 			default: false,
 		},
+
 		/**
 		 * Open state of the Actions menu
 		 */
@@ -289,10 +309,12 @@ export default {
 		overflow: hidden;
 		color: var(--color-text-maxcontrast);
 		padding: 12px;
+		min-width: $clickable-area;
 		max-width: 100%;
 		border-radius: var(--border-radius-pill);
 		align-items: center;
 		display: inline-flex;
+		justify-content: center;
 
 		> span {
 			overflow: hidden;