[Q] can I mix items and groups?

[wsw70]

[Q] can I mix items and groups?

[wsw70]

If I'm understanding what you mean correctly, than yes it is technically possible to mix groups and standalone items, however there are some downsides.

Example

Thanks a lot for the inspiration @MD023 ! Since I have a horizontal layout, your solution fits perfectly!

I may work a bit with the CSS to squeeze some spacing but otherwise it is perfect. Thanks!

[MD023]

Hi again @wsw70!

If I'm understanding what you mean correctly, than yes it is technically possible to mix groups and standalone items, however there are some downsides.

Example

config.yml

services:
  - name: "Applications"
    icon: "fas fa-cloud"
    items:
      - name: "Awesome app"
        logo: "assets/tools/sample.png"
        subtitle: "Bookmark example"
        tag: "app"
        keywords: "self hosted reddit"
        url: "https://www.reddit.com/r/selfhosted/"
        target: "_blank" # optional html a tag target attribute
        type: "SecondaryLink"
        SecondaryLinkUrl: "https://google.ca"
        SecondaryLinkTarget: "_blank"
        SecondaryLinkIcon: "fa-solid fa-circle-info fa-xl" 
      - name: "Another one"
        logo: "assets/tools/sample2.png"
        subtitle: "Another application"
        tag: "app"
        url: "#"


  - name: " "
    items:
      - name: "Awesome app"
        logo: "assets/tools/sample.png"
        subtitle: "Bookmark example"
        tag: "app"
        keywords: "self hosted reddit"
        url: "https://www.reddit.com/r/selfhosted/"
        target: "_blank" # optional html a tag target attribute
        type: "SecondaryLink"
        SecondaryLinkUrl: "https://google.ca"
        SecondaryLinkTarget: "_blank"
        SecondaryLinkIcon: "fa-solid fa-circle-info fa-xl" 
      - name: "Another one"
        logo: "assets/tools/sample2.png"
        subtitle: "Another application"
        tag: "app"
        url: "#"

  - name: "Applications"
    icon: "fas fa-cloud"
    items:
      - name: "Awesome app"
        logo: "assets/tools/sample.png"
        subtitle: "Bookmark example"
        tag: "app"
        keywords: "self hosted reddit"
        url: "https://www.reddit.com/r/selfhosted/"
        target: "_blank" # optional html a tag target attribute
        type: "SecondaryLink"
        SecondaryLinkUrl: "https://google.ca"
        SecondaryLinkTarget: "_blank"
        SecondaryLinkIcon: "fa-solid fa-circle-info fa-xl" 
      - name: "Another one"
        logo: "assets/tools/sample2.png"
        subtitle: "Another application"
        tag: "app"
        url: "#"

As you can see you can mix the use of both groups and standalone items, but due to the missing header and logo, the spacing is off. To counter this slightly, and to still allow for both column and list views, you can add - name: " " (just a space between the quotation marks) to the standalone "group".

This allows Homer to recognize the list of items as a group but without the header and logo. This maintains the ability to use the list and column view, but only marginally lowers the positioning so it does still appear differently than a group with a header and logo.

You may have to mess around with the ordering of the items to cater it to whatever your needs are, but this is what I was able to test. If I come across a better solution I will be sure to let you know!

[MD023]

@wsw70 Glad to see it worked :)