Branding and navigation

You can customize the parts of the admin that surround your content: the logo, navigation, login screen, account screens, and header.

To change colors, fonts, spacing, or the login form’s width, use Customizing CSS. The components below change what the admin displays.

This example uses a text logo, adds an email link below the navigation links, and shows a short message above the login form.

Configuration

Every key must be unique in its contribution list. Replacement conflicts fail during admin config validation instead of silently choosing one component.

1. Create the components

<script lang="ts">
  import type { AdminBrandComponentProps } from '@riducms/plugin';

  let { surface }: AdminBrandComponentProps = $props();
</script>

<!-- Reuse the logo at a larger size on the sign-in screen. -->
<span
  class={[
    'brand-logo',
    { 'brand-logo--login': surface === 'loginLogo' }
  ]}
>
  Acme Studio
</span>

<style>
  .brand-logo {
    font-weight: 600;
  }

  .brand-logo--login {
    font-size: 1.25rem;
  }
</style>

<script lang="ts">
  import type { AdminNavigationComponentProps } from '@riducms/plugin';

  let { user }: AdminNavigationComponentProps = $props();
</script>

{#if user}
  <a href="mailto:[email protected]">Contact the editorial team</a>
{/if}

<script lang="ts">
  import type { AdminLoginComponentProps } from '@riducms/plugin';

  let { defaultView }: AdminLoginComponentProps = $props();
</script>

<p>Use your work email to sign in to Acme Studio.</p>
<!-- Keep Ridu's sign-in form and authentication behavior. -->
{@render defaultView()}

Ridu tells the logo where it is being displayed through surface; this example uses larger text on the login screen. The navigation link reads user to show it after sign-in. The login component renders the built-in form with defaultView, adding a message above it.

You can use your application’s fonts, images, and other Svelte components in all three.

2. Choose where they appear

import { defineAdmin } from '@riducms/plugin/admin';
import { generatedAdminPlugins } from './ridu.plugins.generated';
import BrandLogo from './components/brand-logo.svelte';
import SupportLink from './components/support-link.svelte';
import LoginMessage from './components/login-message.svelte';

export default defineAdmin({
  plugins: generatedAdminPlugins,
  branding: [
    { key: 'login-logo', surface: 'loginLogo', component: BrandLogo },
    {
      key: 'nav-logo',
      surface: 'navigationLogo',
      component: BrandLogo
    }
  ],
  navigation: [
    { key: 'support', component: SupportLink, position: 'afterLinks' }
  ],
  login: [
    {
      key: 'work-email',
      component: LoginMessage,
      position: 'replace'
    }
  ]
});

Merge these entries into your existing admin config and keep bun run dev running. On the login screen you should see Acme Studio and the work-email message. After signing in, the navigation should show the same brand and the contact link.

loginLogo and navigationLogo select the two logo locations. accountAvatar is available for a custom account image. Register at most one component for each location.

Place content around navigation and account screens

Navigation supports before, beforeLinks, afterLinks, after, and replace. Use beforeLinks or afterLinks for content beside the collection and page links. Use Custom pages to add a new admin page and its navigation link.

This example uses replace for login because the component includes the built-in form. Use before or after for a component that only adds content and does not render defaultView. Account components use those positions and choose either surface: 'profile' or surface: 'security'. A replacement receives the built-in content as defaultView; render it with {@render defaultView()} to keep the working login or account form. Only one replacement for each target is allowed.

Header, settings, and logout

Use shellSlots entries to add a component at header, actions, or settingsMenu. The logoutButton option replaces the sign-out control at the bottom of the navigation; that component receives host.logout() to sign the user out. A full navigation replacement must render defaultView to retain that built-in footer, or supply its own sign-out control.

See the admin configuration reference for these options and their component prop types. For shared settings across several of your components, see Shared settings.