Html Child Elements vs JS Property Inconsistencies

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have read the contributing guidelines

Describe the issue

Note on Accordion, List, and some other types there are nice child elements for the parent type.

Note on Breadcrumb and Navbar, you are forced for some properties to use JS and not use child elements. I would like consistency and to have child elements as they are a cleaner way of structuring static content.

Example:

<modus-breadcrumb></modus-breadcrumb>

<script>
  const modusBreadcrumb = document.querySelector('modus-breadcrumb');
  const crumbs = [
    { id: '1', display: 'Crumb 1' },
    { id: '2', display: 'Crumb 2' },
    { id: '3', display: 'Crumb 3' },
    { id: '4', display: 'Crumb 4' },
  ];
  modusBreadcrumb.crumbs = crumbs;
</script>

Could be:

<modus-breadcrumb>
  <modus-breadcrumb-item item-id="1">Crumb 1</modus-breadcrumb-item>
  <modus-breadcrumb-item item-id="2">Crumb 2</modus-breadcrumb-item>
  <modus-breadcrumb-item item-id="3">Crumb 3</modus-breadcrumb-item>
  <modus-breadcrumb-item item-id="4">Crumb 4</modus-breadcrumb-item>
</modus-breadcrumb>

This change would still allow flexibility in JS, but would have a cleaner look and feel as well as support static OR prerendered data better.

Navbar:

<modus-navbar
  id="working"
  show-apps-menu
  show-help
  show-main-menu>
  <div slot="main" style="height:300px;">Render your own main menu.</div>
  <div slot="addMenu">Render your own add menu.</div>
  <div slot="notificationMenu">Render your own notification menu.</div>
  <div slot="profileMenu">Render your own profile menu content.</div>
</modus-navbar>

<script>
  const element = document.querySelector('modus-navbar');
  element.apps = [
    {
        description: 'The One Trimble Design System',
        logoUrl: 'https://modus.trimble.com/favicon.svg',
        name: 'Trimble Modus',
        url: 'https://modus.trimble.com/',
    },
  ];
  element.logoOptions = {
    primary: {
      url: 'https://modus-bootstrap.trimble.com/img/trimble-logo-rev.svg',
      height: 24,
    },
    secondary: { url: 'https://modus.trimble.com/favicon.svg', height: 24 },
  };
  element.profileMenuOptions = {
    avatarUrl: '...',
    email: 'modus_user@trimble.com',
    initials: 'MU',
    username: 'Modus User',
    links: [
      {
        id: "link1",
        display: "Link 1",
        icon: "moon"
      },
      {
        id: "link2",
        display: "Link 2",
        icon: "sun"
      }
    ]
  };
  element.buttons = [
    { id:'addMenu', icon: 'add' },
    { id: 'notificationMenu', icon: 'notifications' }
  ];
</script>

Could be:

<modus-navbar
  id="working"
  show-apps-menu
  show-help
  show-main-menu>
  <div slot="main" style="height:300px;">Render your own main menu.</div>
  <div slot="addMenu">Render your own add menu.</div>
  <div slot="notificationMenu">Render your own notification menu.</div>
  <div slot="profileMenu">Render your own profile menu content.</div>
  <modus-navbar-app>
    <modus-navbar-app-item description="The One Trimble Design System" logoUrl="..." url="...">Trimble Modus</modus-navbar-app-item>
  </modus-navbar-app>
  <modus-navbar-logo-options>...</modus-navbar-logo-options>
  <modus-navbar-buttons>...</modus-navbar-buttons>
</modus-navbar>

Reduced test cases

No response

What operating system(s) are you seeing the problem on?

No response

What browser(s) are you seeing the problem on?

No response

What is the issue regarding ?

@trimble-oss/modus-web-components

What version of npm package are you using ?

0.16.0

Priority

Medium

What product/project are you using Modus Components for ?

ModusBlazor

What is your team/division name ?

AECO

Are you willing to contribute ?

None

Are you using Modus Web Components in production ?

No response

trimble-oss / modus-web-components