umbrella-blazor-register-nav-item
Add a nav item to the Blazor NavMenu.razor for a new feature, inside the correct AuthorizeView policy block and section, following the existing nav structure.
Files2
View on GitHubSKILL.md.ai-shared/skills/umbrella-blazor-register-nav-item/SKILL.md
GitHubRegister Blazor Nav Item
Purpose
Add a navigation link for a new feature to NavMenu.razor, placed inside the correct <AuthorizeView> policy block and logical section group. Nav items are always controlled by <AuthorizeView> — they are only rendered for users who satisfy the policy, matching the [Authorize] policy applied to the index and manage pages.
Discovery (read these before writing anything)
- Read
Web\<AppName>.Web.Client\Layout\Shared\NavMenu.razorin full to understand the existing structure — how sections are grouped with<div class="nav-header">, how<AuthorizeView>blocks are arranged by policy, and the naming/icon conventions. - Identify which
<AuthorizeView>block matches the policy used by the new feature's index page. If no matching block exists, a new one must be added. - Note the icon library in use (typically FontAwesome) and choose an appropriate icon for the feature.
Step 1 -- Locate the correct AuthorizeView block
Find the <AuthorizeView Policy="@<AppName>PolicyNames.<Policy>"> block that matches the policy on the new feature's pages. The nav item goes inside this block.
<AuthorizeView Policy="@SharedPolicyNames.<Policy>" Context="<contextVarName>">
<div class="nav-header">Section Name</div>
<!-- existing items -->
<!-- ADD HERE, in alphabetical order by label -->
<div class="nav-item">
<NavLink class="nav-link" href="/admin/<route-plural>">
<i class="fas fa-<icon-name>" aria-hidden="true"></i>
<span><Label></span>
</NavLink>
</div>
</AuthorizeView>
Rules:
- Place the new
<div class="nav-item">in alphabetical order by label within the same contiguous group and authorization block. Preserve nested policy blocks and established section structure; do not globally reorder unrelated navigation while adding one item. - The
hrefmust match the index page route exactly (e.g./admin/industries). - The
<span>label is the human-readable plural name of the feature (e.g.Industries,Career Quiz Questions). aria-hidden="true"on the icon element is required for accessibility.- Do not add a
<div class="nav-header">unless creating an entirely new section — use the existing section header.
If no matching AuthorizeView block exists
Add a new block at the appropriate position in the nav hierarchy:
<AuthorizeView Policy="@SharedPolicyNames.<Policy>" Context="<policy>Context">
<div class="nav-header"><Section Name></div>
<div class="nav-item">
<NavLink class="nav-link" href="/admin/<route-plural>">
<i class="fas fa-<icon-name>" aria-hidden="true"></i>
<span><Label></span>
</NavLink>
</div>
</AuthorizeView>
The Context attribute value must be unique within the file — use a descriptive name (e.g. siteSettingsContext, adminContext).
Step 2 -- Choose an icon
Use a FontAwesome Free icon that relates to the feature's subject matter. Browse at fontawesome.com/icons (free filter). Common examples from the codebase:
| Feature type | Icon |
|---|---|
| Industry / sector | fa-industry |
| People / users | fa-users |
| Documents | fa-file-alt |
| Settings | fa-cog |
| Education | fa-graduation-cap |
| Messages | fa-envelope |
| Charts / analytics | fa-chart-bar |
| Questions / quiz | fa-question-circle |
If unsure, check what icon an analogous existing feature uses.
Analyzer compatibility
Before finishing, read .ai-shared\bundles\umbrella\analyzer-compatibility.md and build the affected projects with their installed analyzers enabled. Treat diagnostics introduced by the generated or changed code as defects in this workflow.
Verification
- The new
<div class="nav-item">is inside a<AuthorizeView>block whose policy matches the[Authorize]attribute on the index and manage pages. - The
hrefon the<NavLink>matches the index page route. - The item is in alphabetical order by label within its section.
- The icon has
aria-hidden="true". - No new
<div class="nav-header">was added unless the feature genuinely belongs to a new section that didn't previously exist. - Existing nested authorization blocks and unrelated navigation order were preserved; ordering was evaluated within the new item's actual contiguous peer group.