Not able to customize the coral-shell-solutionswitcher nav to create different type of menu systems

[ajaykumarannair]

Expected Behavior

Should be able to customize the coral-shell-solutionswitcher nav to create different type of menu systems like for example the drop down menu on CNN site. Should also be able to control the sort order coral-shell-solutions, currently it sorts only in alphabetical order. Also, need to be able to change the icon size, padding, and others by just adding parameters in the component than having to write additional styles.

Actual Behavior

I am able to use the coral-shell-solutionswitcher only in the way that is demonstrated in the Shell example.

Reproduce Scenario (including but not limited to)

Always

Steps to Reproduce

Try to use the coral-shell-solutionswitcher to create the navigation menu something similar to the CNN dropdown menu which is very simple, we may also try to create other complex ones. The menu does not fall in proper place and also the order is changed to alphabetical order even as we would like it to be in the order that it is added.

Browser name/version/os (ie Chrome Version 62.0.3202.94 (Official Build) (64-bit) MacOS)

Chrome Version 87.0.4280.88 (Official Build) (64-bit) Windows 10

Coral Spectrum version

v4.10.11

Sample Code that illustrates the problem (use the Playground if possible)

    <coral-shell-menu id="menu_solutions" placement="top" from="top" full="" top="">
        <coral-shell-solutionswitcher>
            <coral-shell-solutions>
                <a is="coral-shell-solution" icon="" href="#">About Us</a>
                <a is="coral-shell-solution" icon="" href="#">Contact Us</a>
            </coral-shell-solutions>
            <coral-shell-solutions>
                <a is="coral-shell-solution" icon="" href="#">News</a>
                <a is="coral-shell-solution" icon="" href="#">Events</a>
                <a is="coral-shell-solution" icon="" href="#">Awards</a>
                <a is="coral-shell-solution" icon="" href="#">Feeds</a>
            </coral-shell-solutions>
            <coral-shell-solutions>
                <a is="coral-shell-solution" icon="" href="#" linked="">CURATE NEWS</a>
                <a is="coral-shell-solution" icon="" href="#">ADD EVENT</a>
                <a is="coral-shell-solution" icon="" href="#">ADD RECOGNITION</a>
                <a is="coral-shell-solution" icon="" href="#">SUGGEST FEED</a>
            </coral-shell-solutions>
            <coral-shell-solutions secondary="">
                <a is="coral-shell-solution" icon="" href="#">Daily Brief</a>
                <a is="coral-shell-solution" icon="" href="#">Communities</a>
                <a is="coral-shell-solution" icon="" href="#">Topics</a>
                <a is="coral-shell-solution" icon="" href="#">Evaluations</a>
            </coral-shell-solutions>
        </coral-shell-solutionswitcher>
    </coral-shell-menu>

Screenshots (if applicable)