Top Bar new features (groups, sections and more)

[ArthurYdalgo]

Summary

This PR implements some features to the EDGE Components:

• <native:top-bar-group />
• <native:top-bar-section />
• <native:top-bar-action /> receives two new props:
  • subtitle="..."
  • role="..." (iOS only)

iOS compatibility

I tried to make it work on iOS 18 and previous, but I wasn't successful. This might be an impediment, although given the percentage of users already on iOS 26 this might be an acceptable (or not) compromise.

EDGE Components

Top Bar Group

This component groups <native:top-bar-actions /> and/or <native:top-bar-section /> together in a collapsible menu (kind of similar to the auto-collapse that already happens when there're too many actions on the top bar).

It has the following props:

• id
• icon
• label
• children (which may be <native:top-bar-action /> or <native:top-bar-section />

<native:top-bar-group id="..." icon="..." label="...">
   {{-- other components ... --}}
</native:top-bar-group>

Top Bar Section

This component creates a section inside a tab-group, in case you want to keep things more organized.

It has one single prop called title, which must be declared, but it can be an empty string so it won't show anything

<native:top-bar-section title="...">
   {{-- other components ... --}}
</native:top-bar-section>

Top Bar Action (new props)

The following props were added to a <native:top-bar-action />:

• subtitle: a small text under the action's label
• role (iOS only): accepts a destructive value to make the text red, to indicate a destructive action.

Usage example

<native:top-bar title="Laravel">

    <native:top-bar-group id="group_1" icon="lock" label="More">
        <native:top-bar-section title="Authentication">
            <native:top-bar-action id="help_1" role="cancel" icon="login" label="Login" url="/login"
                subtitle="Get back here!" />
            <native:top-bar-action id="about_1" icon="login" label="Register" url="/register"
                subtitle="Join us!" />
        </native:top-bar-section>

        <native:top-bar-section title=""> {{-- title can be empty --}}
            <native:top-bar-action id="docs" icon="bookmark" label="Docs" url="https://laravel.com/docs" subtitle="Laravel Docs" />
        </native:top-bar-section>

        <native:top-bar-section title="Danger">
            <native:top-bar-action id="delete" icon="delete" label="Delete everything" url="/"
                role="destructive" {{-- iOS only --}} />
        </native:top-bar-section>

    </native:top-bar-group>

    <native:top-bar-action id="search_1" icon="search" label="Search" url="https://google.com.br" />

    <native:top-bar-group id="group_2" icon="more" label="More">
        <native:top-bar-action id="laravel" icon="book-open" label="Laravel" url="https://laravel.com" subtitle="Laravel Homepage" />
        <native:top-bar-action id="google" icon="help" label="Help" url="https://google.com" />
    </native:top-bar-group>
    
</native:top-bar>

iOS 26 simulator

first-test-compressed.mp4

Android 15 device (Galaxy S22+)

Screen_Recording_20260602_020733.mp4

Does auto-collapse still work?

Yes...

<native:top-bar title="Laravel">

    <native:top-bar-group id="group_1" icon="lock" label="More">
        <native:top-bar-section title="Authentication">
            <native:top-bar-action id="help_1" role="cancel" icon="login" label="Login" url="/login"
                subtitle="Get back here!" />
            <native:top-bar-action id="about_1" icon="login" label="Register" url="/register"
                subtitle="Join us!" />
        </native:top-bar-section>

        <native:top-bar-section title=""> {{-- title can be empty --}}
            <native:top-bar-action id="docs" icon="bookmark" label="Docs" url="https://laravel.com/docs" subtitle="Laravel Docs" />
        </native:top-bar-section>

        <native:top-bar-section title="Danger">
            <native:top-bar-action id="delete" icon="delete" label="Delete everything" url="/"
                role="destructive" {{-- iOS only --}} />
        </native:top-bar-section>

    </native:top-bar-group>

    <native:top-bar-action id="search_1" icon="search" label="Search" url="https://google.com.br" />
    <native:top-bar-action id="search_2" icon="search" label="Search" url="https://google.com.br" />
    <native:top-bar-action id="search_3" icon="search" label="Search" url="https://google.com.br" />
    <native:top-bar-action id="search_4" icon="search" label="Search" url="https://google.com.br" />

    <native:top-bar-group id="group_2" icon="more" label="More">
        <native:top-bar-action id="laravel" icon="book-open" label="Laravel" url="https://laravel.com" subtitle="Laravel Homepage" />
        <native:top-bar-action id="google" icon="help" label="Help" url="https://google.com" />
    </native:top-bar-group>
    
</native:top-bar>

iOS 26 simulator

second-test-compressed.mp4

Android 15 device (Galaxy S22+)

Screen_Recording_20260602_022418.mp4

Test plan

• All existing tests still pass (vendor/bin/pest)
• Tested on Android 15 (Galaxy S22+)
• Tested on iOS simulator (iOS 26)

I did try to use Jump to test on a real iOS device, but it didn't work. I assume it's because the swift changes I did are not reflected on the device.

Test Repo

I've tested these changes on a laravel new ... project with react and inertia: https://github.com/ArthurYdalgo/laravel-native

LLM Usage Disclosure

This code was implemented using GPT-5.2-Codex (Medium effort) and Gemini 3.1 Pro (Medium effort)

[ArthurYdalgo]

I can add a PR in the nativephp.com repo for the documentation as well, if this is eventually merged