NcBreadcrumb is not visible

💻 Development app dev
1

What is the correct way to insert NcBreadcrumbs into NcAppContent? When using the template below, the breadcrumbs are collapsed.

<template>
  <NcContent app-name="test">
    <NcAppNavigation>
      <!-- ... -->
    </NcAppNavigation>
    <NcAppContent>
      <NcBreadcrumbs>
        <NcBreadcrumb Name="Breadcrumb 1" title="Breadcrumb 1" href="/Bc1"/>
        <NcBreadcrumb Name="Breadcrumb 2" title="Breadcrumb 2" href="/Bc2"/>
        <NcBreadcrumb Name="Breadcrumb 3" title="Breadcrumb 3" href="/Bc3"/>
      </NcBreadcrumbs>
    </NcAppContent>
  </NcContent>
</template>

Breadcrumbs

Thank you in advance!

2

I’ve made some progress by adding data() and a computed property:

<template>
  <NcContent app-name="test">
    <NcAppNavigation>
      <!-- -->
    </NcAppNavigation>
    <NcAppContent>
      <NcBreadcrumbs>
        <NcBreadcrumb v-for="bc in breadcrumbs" :key="bc.id" :name="bc.name" :title="bc.title"/>
      </NcBreadcrumbs>
    </NcAppContent>
  </NcContent>
</template>

<script>
// ...
export default {
  name: 'App',
  components: {
    // ...
  },

  data () {
    return {
      items: [1, 2, 3],
    }
  },
  computed: {
    breadcrumbs: function () {
      return this.items.map(i => {
            return {
              id: i,
              name: `Breadcrumb ${i}`,
              title: `BC ${i}`,
              href: `/bc${i}`,
            };
          }
      )
    },
  },
  methods: {},
}
</script>
<style scoped>
</style>

But the first breadcrumb is still hidden :frowning:
Breadcrumb-2

3

Okay, is this solved then?

So using expanded properties instead of static ones seems strange to me to be a requirement. You can use the expression like :title="'my static title'" to force the expanded version as well without overhead of computed properties.

Additionally, have a look at the developer console. There might be a warning or a plain error reported about the frontend.

Christian

4

It didn’t fully solved the problem as the first breadcrumb was hiding behind the Navigation Toggle. I compared this with Files app, it has files header div with left margin 50px. If I wrap my NcBreadcrumbs with such a div, the problem is fully solved.

<div class="container">
	<NcBreadcrumbs>
		<NcBreadcrumb v-for="bc in breadcrumbs" :key="bc.id" :name="bc.name" :title="bc.title"/>
	</NcBreadcrumbs>
</div>
<!-- ... -->
<style scoped>
.container {
	display: flex;
	width: 100%;
	margin: 4px 4px 4px 50px;
}
</style>

image
image1311×319 20.2 KB

Files app has 50px value hard-coded in the style. I can do that too, but it would be nice to link $navigationToggleSize to the real size of the Navigation Toggle in case the size changes.

1 Like
5

The problem with hidden breadcrumbs in my first post was in my markup - the name attribute should be lower case.

Thank you @christianlupus for looking into this and for your tips!

1 Like