Skip to content

Creating your own selector ​

The shipped switcher (see Set up your front end) is meant to be a usable default, not the only option. You can replace it entirely — with your own markup, your own framework's components, or a completely different interaction pattern — without touching the package itself.

Override by file path ​

The package's partial view lives at Views/Partials/UmbracoTranslator/LanguageSwitcher.cshtml inside the package assembly. ASP.NET Core always resolves a view from your own site project before falling back to a referenced package's compiled views. So to replace it:

  1. Create a file at the exact same path in your own site project: Views/Partials/UmbracoTranslator/LanguageSwitcher.cshtml.
  2. Write whatever markup you want in it.

Any existing @await Html.PartialAsync("UmbracoTranslator/LanguageSwitcher") calls anywhere in your site — including ones you don't control, if another package or a future update to this one renders it internally — will now render your file instead. No configuration switch, no opt-in; the path match is the whole mechanism.

Building it from the same data the package uses ​

Inject TranslationService (namespace Arjo.Umbraco.Weglot) and use the same methods the built-in switcher and the package's own routing use internally, so your links are guaranteed to match what the site actually serves:

razor
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent>
@inject Arjo.Umbraco.Weglot.TranslationService TranslationService

@{
    // All configured languages, keyed by ISO code.
    var languages = TranslationService.GetSupportedLanguages();

    // Null if the current request isn't on a translated page.
    var current = TranslationService.GetSelectedLanguage();

    // The current page's URL with no language prefix — build translated links by prefixing this.
    string baseUrl = TranslationService.GetUrlWithoutLanguage(Umbraco.AssignedContentItem);
}

<ul class="my-language-list" data-wg-notranslate>
    @foreach (var language in languages.Values)
    {
        <li>
            <a href="/@(language.UrlPrefix.Trim('/'))@baseUrl">@language.Name</a>
        </li>
    }
</ul>
MethodReturns
GetSupportedLanguages()IReadOnlyDictionary<string, WeglotLanguage>: every configured language, keyed by ISO code. Each WeglotLanguage has ISOCode, UrlPrefix, and Name. Returns an empty dictionary when the request's hostname isn't licensed, so your selector hides itself automatically.
GetSelectedLanguage()The WeglotLanguage for the current request, or null if the current page isn't translated (i.e. you're viewing the original).
GetUrlWithoutLanguage(IPublishedContent)The content's URL with no language prefix applied — the base you prefix with a UrlPrefix to link to a specific translation.

The dictionary isn't sorted. The built-in switcher orders by Name; do the same (or your own order) with languages.Values.OrderBy(l => l.Name).

To link back to the original, untranslated page, use baseUrl on its own. The built-in switcher shows that link only when current isn't null.

Don't forget data-wg-notranslate ​

Whatever markup you write, wrap it (or at minimum wrap each language's own display name) in an element carrying data-wg-notranslate. Without it, when a visitor is viewing a translated version of a page, your selector's own text is just ordinary page content as far as the translation pipeline is concerned — meaning your carefully-labeled "Español" could come back mistranslated into another language's word for Spanish. See Set up your front end for the full explanation of why this matters.

Styling ​

Since it's entirely your own markup, style it however you like — the shipped stylesheet (see Styling the switcher) only targets the built-in partial's own class names and won't affect anything you write here unless you deliberately reuse them.

Umbraco Translator is a commercial package — a licence is required for production use.